<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>
<!--触发内容-->
<div class="weui-cell">
<div class="weui-cell__hd">
<label class="weui-label">请选择</label>
</div>
<div class="weui-cell__hd">
<?php foreach($coms as $k=>$v): ?> //$coms数据源
<input class="weui-input" type="text" value="<?= $v?>" onClick="myopendiv();" readonly="readonly" id="comsstr" />
<?php break; endforeach; ?>
<input class="weui-input" type="hidden" value="" readonly="readonly" name="DesignForm[community]" 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="">
<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">
<ul>
<?php foreach($coms as $k=>$v): ?> //$coms数据源
<li onClick="myclosediv('<?= $k?>','<?= $v?>');" class="weui_cell"><?= $v?></li>
<?php endforeach; ?>
</ul>
</div>
</div>
</div>
<script>
//弹窗
function myopendiv(){
$('body').css('overflow','hidden');
document.getElementById('modal-backdrop').style.display ='block';
document.getElementById('myModal').style.display ='block';
}
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();
$('.resultlist li').removeClass('on');
return false;
}
var parent = $('.resultlist ul');
$('.resultlist li').removeClass('on');
//选择包含文本框值的所有加上focus类样式，并把它（们）移到ul的最前面
// prependTo() 方法在被选元素的开头（仍位于内部）插入指定内容
// contains 选择器，选取包含指定字符串的元素
if($('.resultlist li:contains('+searchcoms+')').prependTo(parent).length==0){
$('.resultlist li').show();
}else{
$('.resultlist li:contains('+searchcoms+')').prependTo(parent).show();
$('.resultlist li:not(:contains('+searchcoms+'))').prependTo(parent).hide();
}
$('.resultlist li:contains('+searchcoms+')').prependTo(parent).addClass('on');
//根据字母 $('p:contains('+index+')').parent().prependTo(parent).addClass('on');
});
$('#searchClear').on('click', function () {
$('.resultlist li').show();
$('.resultlist li').removeClass('on');
});
})
</script>
效果:
11.png
2.png
网友评论