Layuiselect配合input实现可输⼊，可选择，可搜索
1.前⾔
今天遇到⼀个问题，客户要求select框可以⾃⼰输⼊，就是在下拉列表⾥不到⾃⼰想要的选项就可以⾃⼰输⼊，同时还要⽀持模糊匹配功
能，百度了⼀下，都是讲select配合input，input覆盖在select上⾯，同时⼜不完全盖住select，就可以实现，输⼊，和选择并存了，但是
模糊匹配是⼀个问题。好了先看⼀张效果图。
Video_2018-10-09_150251.gif
其实我这⾥下拉框中有五个选项，111~555.666是没有的这个是⾃⼰输⼊的。
先看html代码
<div class="layui-col-md4">
<label class="layui-form-label">移交单位<span >*</span></label>
<div class="layui-input-block">
<input type="text" name="HandoverCompany" id="HandoverCompany" class="layui-input" lay-verify="r                    <select type="text" id="hc_select" lay-filter="hc_select" autocomplete="off" placeholder="移交单位全称" lay-verify="required" class="layui-select" lay-s                        <option value="111">111</option>
<option value="222">222</option>input框禁止输入
<option value="333">333</option>
<option value="444">444</option>
<option value="555">555</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
<('select(hc_select)', function (data) {  //选择移交单位赋值给input框
$("#HandoverCompany").val(data.value);
$("#hc_select").next().find("dl").css({ "display": "none" });
});
window.search = function () {
var value = $("#HandoverCompany").val();
$("#hc_select").val(value);
$("#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框，可以就需要('select(hc_select)'来监听select值的变化，选择了之后要把下拉列表给隐藏掉。同时重新渲染⼀下这个表单，只重新渲染当前的select也是可以的。
然后就是输⼊到input框⾥的⽂字如何去select中去搜索。⾸先我们通过检查select的dom结构可以发现，他⾥⾯的选项都是在dl下的dd标签中，如图。
image.png
然后我们获取到dl标签，然后通过循环的⽅式挨个去匹配dd中的选项与我们输⼊的⽂本是否存在关系。通过indexOf就⾏。如果不相似，则直接隐藏掉，然后这⾥为什么要定义⼀个j呢？是因为如果都不匹配的话，下⾯还是会出来⼀个空的dl标签，页⾯显⽰就是⼀个空的⼩列表，有点影响美观，所以如果你输⼊的⽂本和下拉列表中的选项都没关系的话，直接把dl给隐藏了。这⾥我是判断不相似的个数如果和dl.length 相等的话，就说明你输⼊的⽂本和select的选项没⼀个相似的，然后就可以把dl隐藏了。
study hard and make progress every day。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。