Layui实现input输入和选择的方法：
HTML代码：
其中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
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标签中，如图。
BizPower CRM客户管理系统
下载
通过使用BizPower CRM解决方案，您的员工、生产过程及信息能够与客户保持着平稳、无间断的联络，并且能够通过以客户为焦点、创新的产品和服务；以客户为中心，更高层次的生产过程；持久有益的客户关系这三个方面创造有价值客户的领导关系。选择Bizpower CRM的原因1、灵活的数据权限和功能权限BizPower CRM 系统通过引入了灵活的数据权限和功能权限，模仿现实中协同工作的实际情况。 实现企
然后我们获取到dl标签，然后通过循环的方式挨个去匹配dd中的选项与我们输入的文本是否存在关系。通过indexOf就行。如果不相似，则直接隐藏掉，然后这里为什么要定义一个j呢？
是因为如果都不匹配的话，下面还是会出来一个空的dl标签，页面显示就是一个空的小列表，有点影响美观，所以如果你输入的文本和下拉列表中的选项都没关系的话，直接把dl给隐藏了。这里我是判断不相似的个数如果和dl.length 相等的话，就说明你输入的文本和select的选项没一个相似的，然后就可以把dl隐藏了。
