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

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

html代码：

样式：

1 <style>
2     .select-search-input {
3         position: absolute;
4         z-index: 2;
5         width: 80%;
6     }
7 </style>

select部分：

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

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

JS代码：

 1 layui.use(['form', 'layedit','upload'], function () {
 2     var form = layui.form
 3     form.on('select(selectUser)', function (data) {   //选择并赋值给input框
 4         // value：data.value
 5         // 文本：data.elem[data.elem.selectedIndex].text;
 6         var txt = data.elem[data.elem.selectedIndex].text;
 7         $("#selectInputUser").val(txt);
 8         $("#selectUser").next().find("dl").css({ "display": "none" });
 9         form.render();
10     });
11 
12     window.search = function () {
13         var value = $("#selectInputUser").val();
14         $("#selectUser").val(value);
15         form.render();
16         $("#selectUser").next().find("dl").css({ "display": "block" });
17         var dl = $("#selectUser").next().find("dl").children();
18         var j = -1;
19         for (var i = 0; i < dl.length; i++) {
20             if (dl[i].innerHTML.indexOf(value) <= -1) {
21                 dl[i].style.display = "none";
22                 j++;
23             }
24             if (j == dl.length-1) {
25                 $("#selectUser").next().find("dl").css({ "display": "none" });
26             }
27         }
28     }
29 });

done!