<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="../library/css/weui.css" />
<link rel="stylesheet" href="../library/css/weuix.css" />
<!-- <link rel="stylesheet" type="text/css" href="lib/weui.min.css"> -->
<script src="../library/js/zepto.min.js"></script>
<script src="../library/js/common.js"></script>
<script src="../library/js/zepto.weui.js"></script>
<script src="../library/js/weui.min.js"></script>
<title>WeUI JS弹出选择层+模糊搜索</title>
</head>
<body>
<div class="weui-btn_primary weui-header ">
<div class="weui-header-left"> <a class="icon icon-109 f-white" href="../index.html"></a> </div>
<h1 class="weui-header-title">WeUI JS弹出选择层+模糊搜索</h1>
<div class="weui-header-right"><a class="icon icon-22 f-white"></a></div>
</div>
<form>
<!--触发内容-->
<div class="weui-cell">
<div class="weui-cell__hd">
<label class="weui-label">请选择:</label>
</div>
<div class="weui-cell__hd">
<input class="weui-input" type="text" onClick="myopendiv();" readonly="readonly" id="comsstr" />
<input class="weui-input" type="hidden" readonly="readonly" id="cm" />
</div>
</div>
<!--弹窗内容-->
<div id="modal-backdrop" class="modal-backdrop"></div>
<div id="myModal" class="myModal">
<div class="modal-header">
<button type="button" class="modal-close" onClick="myclosediv('F');">×</button>
<div id="myModalLabel">请选择</div>
<div class="weui-search-bar" id="searchBar" style="margin-top: 10px;padding:0">
<form class="weui-search-bar__form">
<div class="weui-search-bar__box">
<i class="weui-icon-search"></i>
<input type="search" class="weui-search-bar__input" id="searchcoms" data-filter="true" placeholder="搜索"
required="" autocomplete="off">
<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
</div>
<label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
<i class="weui-icon-search"></i>
<span>搜索</span>
</label>
</form>
<a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">确认</a>
</div>
</div>
<div class="modal-body">
<div class="weui-cells weui-cells_access resultlist" style="top:-20px" id="datas">
<ul></ul>
</div>
</div>
</div>
</form>
</body>
<script>
var map = {};
//获取数据源
$.ajax({
type: 'post',
url: "",
async: false,
success: function(data) {
var html = "";
if (data.code == 0) {
$.each(data.yajinList, function(index, item) {
html += "<li onClick= myclosediv('" + item.id + "','" + item.outUserName + "') class='weui_cell'>" +
item.outUserName + "-" + item.approvalDate + "-" + item.money + "</li>"
var order = {
approvalDate: item.approvalDate,
money: item.money
}
map[item.id] = order;
});
$("#datas ul").append(html);
}
}
});
//弹窗
function myopendiv() {
$('body').css('overflow', 'hidden');
document.getElementById('modal-backdrop').style.display = 'block';
document.getElementById('myModal').style.display = 'block';
$('#searchcoms').val("");
$('.resultlist li').show();
}
function myclosediv(strVlues, str) {
document.getElementById('modal-backdrop').style.display = 'none';
document.getElementById('myModal').style.display = 'none';
if (strVlues != 'F') {
document.getElementById('cm').value = strVlues;
document.getElementById('comsstr').value = str;
} else {
$('body').css('overflow', 'inherit');
$('.resultlist li').show();
}
}
//初始化WEUI搜索
weui.searchBar('#searchBar');
$(function() {
//小区模糊搜索功能 键盘按键弹起时执行
$('#searchcoms').keyup(function() {
var searchcoms = $.trim($('#searchcoms').val().toString()); // 去掉两头空格
if (searchcoms == '') { // 如果搜索框输入为空
$('.resultlist li').show();
return false;
}
var parent = $('.resultlist ul');
//选择包含文本框值的所有加上focus类样式，并把它（们）移到ul的最前面
// prependTo() 方法在被选元素的开头（仍位于内部）插入指定内容
// contains 选择器，选取包含指定字符串的元素
if ($('.resultlist li:contains(' + searchcoms + ')').prependTo(parent).length == 0) {
$('.resultlist li').hide();
} else {
$('.resultlist li:contains(' + searchcoms + ')').prependTo(parent).show();
}
});
$('#searchClear').on('click', function() {
$('.resultlist li').show();
});
})
</script>
<style>
.modal-close {
position: absolute;
top: -10px;
right: -10px;
width: 30px;
height: 30px;
border-radius: 50px;
color: #ffffff;
background: #000;
text-shadow: 0 0px 0 #000;
border: 2px solid #fff;
filter: alpha(opacity=20)
}
.modal-backdrop {
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #666
}
.modal-backdrop.fade {
opacity: 0
}
.modal-backdrop,
.modal-backdrop.fade.in {
opacity: .8;
}
.myModal {
display: none;
position: absolute;
top: 20%;
left: 10%;
z-index: 1050;
width: 300px;
padding-bottom: 10px;
background-color: #fff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
outline: 0;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.modal-header {
padding: 5px 10px;
border-bottom: 1px solid #eee
}
.modal-header .close {
margin-top: 2px
}
.modal-header h3 {
margin: 0;
line-height: 30px
}
.modal-body {
max-height: 300px;
overflow-y: auto
}
.on {
color: red;
}
.resultlist li {
padding: 10px 0;
text-align: center;
}
</style>
</html>
09-04
474
474
07-28
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
