1 <div class="layui-col-md4"> 2 <label class="layui-form-label">移交单位<span style="color:red">*</span></label> 3 <div class="layui-input-block"> 4 <input type="text" name="HandoverCompany" id="HandoverCompany" class="layui-input" style="position:absolute;z-index:2;width:80%;" lay-verify="required" value="111" onkeyup="search()" autocomplete="off"> 5 <select type="text" id="hc_select" lay-filter="hc_select" autocomplete="off" placeholder="移交单位全称" lay-verify="required" class="layui-select" lay-search> 6 <option value="111">111</option> 7 <option value="222">222</option> 8 <option value="333">333</option> 9 <option value="444">444</option> 10 <option value="555">555</option> 11 </select> 12 </div> 13 </div>
- 其中input的几个style样式简单说一下。
position:absolute 在这里是让input和select在同一位置。
z-index:2 是为了让input在select上面。
width:80% 是为了避免盖住select后面的小三角符号，select还能够点击。
autocomplete="off" 为了避免自动填充input框，省得压盖select选项css
- 而后是JS代码。
layui.use(['form', 'layedit','upload'], function () { var form = layui.form form.on('select(hc_select)', function (data) { //选择移交单位 赋值给input框 $("#HandoverCompany").val(data.value); $("#hc_select").next().find("dl").css({ "display": "none" }); form.render(); }); window.search = function () { var value = $("#HandoverCompany").val(); $("#hc_select").val(value); form.render(); $("#hc_select").next().find("dl").css({ "display": "block" }); var dl = $("#hc_select").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) { $("#hc_select").next().find("dl").css({ "display": "none" }); } } } });
- 简单说一下个人思路，首先select选择的值要能赋值给input框，能够就须要
form.on('select(hc_select)'来监听select值的变化，选择了以后要把下拉列表给隐藏掉。同时从新渲染一下这个表单，只从新渲染当前的select也是能够的。 - 而后就是输入到input框里的文字如何去select中去搜索。首先咱们经过检查select的dom结构能够发现，他里面的选项都是在dl下的dd标签中，如图。
-
而后咱们获取到dl标签，而后经过循环的方式挨个去匹配dd中的选项与咱们输入的文本是否存在关系。经过
indexOf就行。若是不类似，则直接隐藏掉，而后这里为何要定义一个j呢？是由于若是都不匹配的话，下面仍是会出来一个空的dl标签，页面显示就是一个空的小列表，有点影响美观，因此若是你输入的文本和下拉列表中的选项都不要紧的话，直接把dl给隐藏了。这里我是判断不类似的个数若是和dl.length 相等的话，就说明你输入的文本和select的选项没一个类似的，而后就能够把dl隐藏了。