WeUI JS弹出选择层+模糊搜索

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

效果: