layui select配合input实现动态模糊搜索

功能需求：select框可以自己输入，就是在下拉列表里找不到自己想要的选项就可以自己输入，同时还要支持模糊匹配功能

html代码：

样式：

 <style>
     .select-search-input {
         position: absolute;
         z-index: 2;
         width: 80%;
     }
 </style>

select部分：

 <div class="layui-form-item layui-inline">
     <label class="layui-form-label" style="width:60px;">用户列表</label>
     <div class="layui-input-inline" style="width:150px;">
         <input type="text" name="selectInputUser" id="selectInputUser" class="layui-input select-search-input" value="" onkeyup="search();" autocomplete="off">
         <select name="user_id" id="selectUser" lay-filter="selectUser" autocomplete="off" class="layui-select" lay-search>
             <option value="">-不限-</option>
             <option value="1">张三</option>
             <option value="2">李四</option>
             <option value="3">王二麻子</option>
         </select>
     </div>
 </div>

其中input的几个style样式简单说一下：
position:absolute：在这里是让input和select在同一位置。
z-index:2 是为了让input在select上面。
width:80% 是为了不盖住select后面的小三角符号，select还可以点击。
autocomplete="off" 为了不自动填充input框，免得压盖select选项

JS代码：

 layui.use(['form', 'layedit','upload'], function () {
     var form = layui.form
     form.on('select(selectUser)', function (data) {   //选择并赋值给input框
         // value：data.value
         // 文本：data.elem[data.elem.selectedIndex].text;
         var txt = data.elem[data.elem.selectedIndex].text;
         $("#selectInputUser").val(txt);
         $("#selectUser").next().find("dl").css({ "display": "none" });
         form.render();
     });
 
     window.search = function () {
         var value = $("#selectInputUser").val();
         $("#selectUser").val(value);
         form.render();
         $("#selectUser").next().find("dl").css({ "display": "block" });
         var dl = $("#selectUser").next().find("dl").children();
         var j = -1;
         for (var i = 0; i < dl.length; i++) {
             if (dl[i].innerHTML.indexOf(value) <= -1) {
                 dl[i].style.display = "none";
                 j++;
             }
             if (j == dl.length-1) {
                 $("#selectUser").next().find("dl").css({ "display": "none" });
             }
         }
     }
 });

done!