mui中点击按钮弹出层可供选择数据自动填充

最新推荐文章于 2021-08-28 10:06:57 发布

axs441702

最新推荐文章于 2021-08-28 10:06:57 发布

阅读量548

点赞数

原文链接：http://www.cnblogs.com/zyanrong/p/11315492.html

版权

jsp
<div class="mui-input-row"  style="line-height: 15px;">
      <label>调动职务</label>
      <span  id='transferPositionName'><font style="color:#959595;">选择职务</font></span>
       <input type="hidden" id="transferPosition" value=""/>
</div>

<div class= "tddivShow" id="tddiv" style="display: none;">
    <header class="mui-bar mui-bar-nav tdheader">
      <span id="closetd"><i class="icon iconfont" style="font-size: 20px;color: #C6C6C6;line-height: 35px;float: right;">&#xeb7d;</i></span>
       <h1 class=" titles">选择职务</h1>
     </header>
   <div class="mui-scroll-wrapper" id="td_scroll" style="padding-top:2px;">
   <div class="mui-scroll">
      <div class="mui-input-row mui-search zwsearch" id="zwsearch">
      <input type="search" class="mui-input-clear mui-indexed-list-search-input" onfocus="setfocus(this)" oninput="setinput(this);" placeholder="搜索职 务" >
       </div>
       <div id = "tdul">
       </div>
  </div>
  </div>
</div>
JS
var TempvalueArr=[];//存储li的value
var TempnameArr=[];//存储li的name

填充数据
 var msg = "<ul class='mui-table-view'>";
     $.each(data.hrSchoolmovetypelista,function(index,transferPosition){
        msg+="<li class='mui-table-view-cell mui-indexed-list-item liname' value='"+transferPosition.value+"'>"+transferPosition.name+"</li>";
                     TempvalueArr[index] = transferPosition.value;
                     TempnameArr[index] = transferPosition.name;
      });
        msg +="</ul>";
     $("#tdul").html(msg);
     mui("#tdul").on('tap','.liname',function(){
         var value = this.getAttribute("value");
         var name = this.innerText;
         $("#transferPosition").val(value);
         $("#transferPositionName").html(name);
         $("#tddiv").css("display","none");
     });
搜索时调用
     mui("#zwsearch").on('tap','.mui-icon-clear',function(){
            var mdocment = $("#tdul");
           mdocment.html("");
            var msg = "<ul class='mui-table-view'>";
            for(i=0;i<TempnameArr.length;i++){
                      msg+="<li class='mui-table-view-cell mui-indexed-list-item liname' value='"+TempvalueArr[i]+"'>"+TempnameArr[i]+"</li>";
            }
            msg +="</ul>";
            mdocment.append(msg);
            mui("#tdul").on('tap','.liname',function(){
                var value = this.getAttribute("value");
                var name = this.innerText;
                $("#transferPosition").val(value);
                $("#transferPositionName").html(name);
                $("#tddiv").css("display","none");
           });
     });
获取焦点时调用
function setfocus(this_){ 
       var mdocment = $("#tdul");
            mdocment.html("");
          var msg = "<ul class='mui-table-view'>";
          if(this_.value.length>0){
                 for(i=0;i<TempnameArr.length;i++){
                     if(TempnameArr[i].substring(0,this_.value.length).indexOf(this_.value)==0){
                      msg+="<li class='mui-table-view-cell mui-indexed-list-item liname' value='"+TempvalueArr[i]+"'>"+TempnameArr[i]+"</li>";
                 }
                 }
                msg +="</ul>";
                mdocment.append(msg);
          }else{
                 for(i=0;i<TempnameArr.length;i++){
                msg+="<li class='mui-table-view-cell mui-indexed-list-item liname' value='"+TempvalueArr[i]+"'>"+TempnameArr[i]+"</li>";
              }
                msg +="</ul>";
                mdocment.append(msg);
          }
           mui("#tdul").on('tap','.liname',function(){
                var value = this.getAttribute("value");
                var name = this.innerText;
                $("#transferPosition").val(value);
                $("#transferPositionName").html(name);
                $("#tddiv").css("display","none");
           });
}
输入框发生变化时调用
function setinput(this_){  
      var mdocment = $("#tdul");
           mdocment.html("");
      var msg = "<ul class='mui-table-view'>";
      for(i=0;i<TempnameArr.length;i++){
            if(TempnameArr[i].substring(0,this_.value.length).indexOf(this_.value)==0){
                 msg+="<li class='mui-table-view-cell mui-indexed-list-item liname' value='"+TempvalueArr[i]+"'>"+TempnameArr[i]+"</li>";
            }
      }
     msg +="</ul>";
     mdocment.append(msg);
     mui("#tdul").on('tap','.liname',function(){
           var value = this.getAttribute("value");
           var name = this.innerText;
           $("#transferPosition").val(value);
           $("#transferPositionName").html(name);
           $("#tddiv").css("display","none");
     });
}
点击打开层
     document.getElementById("transferPositionName").addEventListener('tap', function() {
                $("#tddiv").css("display","block");
                mui('#td_scroll').scroll().scrollTo(0,0,100);//100毫秒滚动到顶;
                $("#tddiv").css("height",window.innerHeight-45+"px");
     });
点击关闭层
     document.getElementById("closetd").addEventListener('tap', function() {
           $("#tddiv").css("display","none");
     });