weui js 读取PHP,WeUI JS弹出选择层+模糊搜索

.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;

}

请选择

<?php foreach($coms as $k=>$v): ?> //$coms数据源

×

请选择

搜索

确认

<?php foreach($coms as $k=>$v): ?> //$coms数据源

= $v?>

//弹窗

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');

});

})

效果:

11.png

2.png