mui中點擊按鈕彈出層可供選擇數據自動填充

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"); });