Layui如何实现input输入？-创新互联

Layui实现input输入和选择的方法：

成都创新互联主营费县网站建设的网络公司,主营网站建设方案,成都app开发,费县h5小程序定制开发搭建,费县网站营销推广欢迎费县等地区企业咨询

HTML代码：

                移交单位*
                

                    
                    
                        111
                        222
                        333
                        444
                        555
                    
                
            

其中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标签中，如图。

然后我们获取到dl标签，然后通过循环的方式挨个去匹配dd中的选项与我们输入的文本是否存在关系。通过indexOf就行。如果不相似，则直接隐藏掉，然后这里为什么要定义一个j呢？

是因为如果都不匹配的话，下面还是会出来一个空的dl标签，页面显示就是一个空的小列表，有点影响美观，所以如果你输入的文本和下拉列表中的选项都没关系的话，直接把dl给隐藏了。这里我是判断不相似的个数如果和dl.length 相等的话，就说明你输入的文本和select的选项没一个相似的，然后就可以把dl隐藏了。

以上就是Layui实现input输入和选择的方法的详细内容，更多请关注创新互联成都网站设计公司其它相关文章！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享名称：Layui如何实现input输入？-创新互联
本文URL：http://scjbc.cn/article/hoesi.html