layui 可输入的下拉框
相当完美
转载至 https://www.jianshu.com/p/5e526c9db035
<div class="layui-col-md4">
<label class="layui-form-label">移交单位<span style="color:red">*</span></label>
<div class="layui-input-block">
<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">
<select type="text" id="hc_select" lay-filter="hc_select" autocomplete="off" placeholder="移交单位全称" lay-verify="required" class="layui-select" lay-search>
<option value="111">111</option>
<option value="222">222</option>
<option value="333">333</option>
<option value="444">444</option>
<option value="555">555</option>
</select>
</div>
</div>
position:absolute 在这里是让input和select在同一位置。
z-index:2 是为了让input在select上面。
width:80% 是为了不盖住select后面的小三角符号,select还可以点击。
autocomplete=“off” 为了不自动填充input框,免得压盖select选项
layui.use(['form', 'layedit','upload'], function () {
var form = layui.form
form.on('select(hc_select)', function (data) { //选择移交单位 赋值给input框
var select_text = data.elem[data.elem.selectedIndex].text;
$("#HandoverCompany").val(select_text );
$("#hc_select").next().find("dl").css({ "display": "none" });
form.render();
});
$('#HandoverCompany').bind('input propertychange', 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" });
}
}
}
});
作者:仙剑奇灵
链接:https://www.jianshu.com/p/5e526c9db035
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。