功能需求：select框可以自己输入，就是在下拉列表里找不到自己想要的选项就可以自己输入，同时还要支持模糊匹配功能
样式：
1 <style> 2 .select-search-input { 3 position: absolute; 4 z-index 25 width 80%6 } 7 </>
select部分：
1 div class="layui-form-item layui-inline" 2 label ="layui-form-label" style="width:60px;">用户列表label 3 ="layui-input-inline"="width:150px;" 4 input type="text" name="selectInputUser" id class="layui-input select-search-input" value="" onkeyup="search();" autocomplete="off" 5 select name="user_id"="selectUser" lay-filter="off"="layui-select" lay-search 6 option value="">-不限-option 7 ="1">张三 8 ="2">李四 9 ="3">王二麻子10 select11 div12 >
其中input的几个style样式简单说一下：
position:absolute：在这里是让input和select在同一位置。
z-index:2 是为了让input在select上面。
width:80% 是为了不盖住select后面的小三角符号，select还可以点击。
autocomplete="off" 为了不自动填充input框，免得压盖select选项
JS代码：
1 layui.use(['form','layedit','upload'],function () { var form = layui.form 3 form.on('select(selectUser)',1)">function (data) { //选择并赋值给input框 value：data.value 文本：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 = 13 var value = $("#selectInputUser").val(); 14 $("#selectUser").val(value); 15 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) <= -121 dl[i].style.display = "none"22 j++23 } 24 if (j == dl.length-125 $("#selectUser").next().find("dl").css({ "display": "none"26 27 } 28 } 29 });
done!
