mui picker 添加模糊搜索功能

用mui的picker时候需要搜索功能，但api文档不支持。稍对mui.picker.min.js 进行小小修改

参考文章

https://blog.csdn.net/zbl744949461/article/details/89447226

效果图

代码

• mui.picker.min.js 

• //原 poppicker 。现实了搜索框和搜索功能
  function(e, t) {
      e.dom = function(i) {
          return "string" != typeof i ? i instanceof Array || i[0] && i.length ? [].slice.call(i) : [i] : (e.__create_dom_div__ || (e.__create_dom_div__ = t.createElement("div")),
          e.__create_dom_div__.innerHTML = i,
          [].slice.call(e.__create_dom_div__.childNodes))
      }
      ;
      var i = '<div class="mui-poppicker ">		<div class="mui-poppicker-header" style=" display: flex; align-items: center;">		\
  					<button class="mui-btn mui-poppicker-btn-cancel"  style="width:10%  text-align: center">取消</button>		\
               <input type="search" class="mui-input-clear  mui-search" id="searchBtn"  placeholder="请输入" style="    margin-left: 3px; margin-right: 3px; text-align: left; margin-bottom: 0px;"> \
  						<button class="mui-btn mui-btn-blue mui-poppicker-btn-ok"  style="width:15%; text-align: center">确定</button>			<div class="mui-poppicker-clear"></div>		</div>		<div class="mui-poppicker-body">		</div>	</div>'
        , //     var  i = '<div class="mui-poppicker searchPicker"> <div class="mui-poppicker-header"> <div class="pickerTitle"></div>\
      //    <button class="mui-btn searchBtnCancel"><span class="mui-icon mui-icon-closeempty"></span></button>\
      //    <button class="mui-btn mui-btn-blue mui-poppicker-btn-ok">确定选择</button>\
      //    <div class="mui-poppicker-clear"></div>\
      // </div>\
      // <div class="mui-poppicker-body">\
      //       <div class="mui-input-row mui-search" style="text-align: left">\
      //          <input type="search" class="mui-input-clear"  class=placeholder="">\
      //       </div>\
      //   </div>\
      // </div>';
      n = '<div class="mui-picker">		<div class="mui-picker-inner">			<div class="mui-pciker-rule mui-pciker-rule-ft"></div>			<ul class="mui-pciker-list">			</ul>			<div class="mui-pciker-rule mui-pciker-rule-bg"></div>		</div>	</div>';
      e.PopPicker = e.Class.extend({
          init: function(n) {
              var a = this;
              a.options = n || {},
              a.options.buttons = a.options.buttons || ["取消", "确定"],
              a.panel = e.dom(i)[0],
              t.body.appendChild(a.panel),
              a.ok = a.panel.querySelector(".mui-poppicker-btn-ok"),
              a.cancel = a.panel.querySelector(".mui-poppicker-btn-cancel"),
              a.body = a.panel.querySelector(".mui-poppicker-body"),
  
  
  			a.input = a.panel.querySelector('input[type="search"]'),
              mui('.mui-input-row input').input();
  
              a.mask = e.createMask(),
              a.cancel.innerText = a.options.buttons[0],
              a.ok.innerText = a.options.buttons[1],
              a.cancel.addEventListener("tap", function(e) {
                  a.hide()
              }, !1),
  
  			//点击确认按钮
              a.ok.addEventListener("tap", function(e) {
                  console.log("xxxx")
                  if (a.callback) {
  					if(a.getSelectedItems()[0].value){
  						
  						
  						var t = a.callback(a.getSelectedItems());
  						t !== !1 && a.hide()
  						
  						//清空选择的值
  						// document.getElementById("searchBtn").value = "";
  						// a.setData(a.options.data);
  					
  						
  					}else{
  						mui.alert("没有找到对应值");
  					}
                  }
              }, !1),
              a.mask[0].addEventListener("tap", function() {
                  a.hide()
              }, !1),
              a._createPicker(),
              a.panel.addEventListener(e.EVENT_START, function(e) {
                  e.preventDefault()
              }, !1),
              a.panel.addEventListener(e.EVENT_MOVE, function(e) {
                  e.preventDefault()
              }, !1),
  
  			//---------输入框操作----------
              a.input.addEventListener('tap', function (e) {
                  // a.body.querySelector(".mui-input-row").classList.add("mui-active");
                  a.input.blur();
                  a.input.focus();
              }, false);
              a.input.addEventListener('focus', function () {
                  a.panel.style.top = a.top;
              });
              a.input.addEventListener('input', function () {
  
                      //option.data
  					if(!a.options.data){
  						a.options.data = a.pickers[0].items;
  					}
  
                      a.panel.style.top = a.top;
                      a.searchClean = a.input.nextSibling;
                      a.searchClean.addEventListener('tap', sc, false);
                      var filter = this.value;
                      var filterList = [];
  					var beforeItems = a.pickers[0].items;
                      if (filter) {
  						var options = a.options.data;
  
  						//遍历下拉框选项
                          for (var i = 0; i < options.length; i++) {
                              if (options[i].text.search(filter) != -1) {
                                  filterList.push(options[i]);
                              }
                          }
                          a.setData(filterList);
                      } else {
                          a.setData(a.options.data);
                      }
                      a.pickers[0].setSelectedIndex(0, 1000);
  				},false);
  
  			 function sc(){
  			                if(!a.searchClean.value){
  			                    a.setData(a.options.data);
  			                }
  			                a.searchClean.removeEventListener('tap',sc,false);
  			            }
  
              },
  	        //---------输入框操作END----------
  
          _createPicker: function() {
              var t = this
                , i = t.options.layer || 1
                , a = 100 / i + "%";
              t.pickers = [];
              for (var r = 1; i >= r; r++) {
                  var s = e.dom(n)[0];
                  s.style.width = a,
                  t.body.appendChild(s);
                  var c = e(s).picker();
                  t.pickers.push(c),
                  s.addEventListener("change", function(e) {
                      var t = this.nextSibling;
                      if (t && t.picker) {
                          var i = e.detail || {}
                            , n = i.item || {};
                          t.picker.setItems(n.children)
                      }
                  }, !1)
              }
          },
          setData: function(e) {
              var t = this;
              e = e || [],
              t.pickers[0].setItems(e)
          },
          getSelectedItems: function() {
              var e = this
                , t = [];
              for (var i in e.pickers) {
                  var n = e.pickers[i];
                  t.push(n.getSelectedItem() || {})
              }
              return t
          },
          show: function(i) {
              var n = this;
              n.callback = i,
              n.mask.show(),
              t.body.classList.add(e.className("poppicker-active-for-page")),
              n.panel.classList.add(e.className("active")),
              n.__back = e.back,
              e.back = function() {
                  n.hide()
              }
          },
          hide: function() {
              var i = this;
              i.disposed || (i.panel.classList.remove(e.className("active")),
              i.mask.close(),
              t.body.classList.remove(e.className("poppicker-active-for-page")),
              e.back = i.__back)
          },
          dispose: function() {
              var e = this;
              e.hide(),
              setTimeout(function() {
                  e.panel.parentNode.removeChild(e.panel);
                  for (var t in e)
                      e[t] = null,
                      delete e[t];
                  e.disposed = !0
              }, 300)
          }
      })
  }(mui, document),

• html 代码

• <link rel="stylesheet" type="text/css" href="css/myMuiSearchPicker.css" />
  
  <html>
  <div class="mui-input-row" style="padding: 10px 0px;     height: 50px">
  					<label><span class="mui-badge mui-badge-danger mui-badge-inverted">*</span>picke:</label>
  					<div id='showUserPicker'  class='ui-alert  mui-btn-block searchPicker' >请选择</div>
  					<input id='showUserPicker_value'  type="hidden" />
   				</div>
  
  </html>
  
  
  	<script src="/pages/js/mui.picker.min.js"></script>
  
  	<script>
  //...省略部分
  
  	mui.init({
  			swipeBack: true //启用右滑关闭功能
  		});
  
  		(function($, doc) {
  			$.init();
  			$.ready(function() {
  
  				//初始化选择框的内容
  				var searchPicker = new $.PopPicker();
   				initPick(searchPicker);
  			});
  		})(mui, document);
  
  
  	//初始化选择框的内容
  		function initPick(userPicker){
  
  			mui.ajax(baseUrl + 'url',{
  				dataType:'json',//服务器返回json格式数据
  				type:'get',//HTTP请求类型
  				timeout:10000,//超时时间设置为10秒；
  				headers:{'Content-Type':'application/json'},
  				success:function(data){
  
  					if(data.code == 200 &&  data.data){
  					  userPicker.setData(data.data)
  						var showUserPickerButton = document.getElementById('showUserPicker');
  						showUserPickerButton.addEventListener('tap', function(event) {
  							userPicker.show(function(items) {
  								showUserPickerButton.innerText = items[0].text;
  								mui("#showUserPicker_value")[0].value = items[0].value;
  								//返回 false 可以阻止选择框的关闭
  								// return false;
  							});
  						}, false);
  					}else{
  						mui.toast(data.msg)
  					}
  
  				},
  				error:function(xhr,type,errorThrown){
  					//异常处理；
  					console.log(type);
  				}
  			});
  		}
  //...
  
  	</script>