Layui實現(xiàn)input輸入和選擇的方法：

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都網(wǎng)站建設、成都網(wǎng)站設計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的南昌縣網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！

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)'來監(jiān)聽select值的變化，選擇了之后要把下拉列表給隱藏掉。同時重新渲染一下這個表單，只重新渲染當前的select也是可以的。

然后就是輸入到input框里的文字如何去select中去搜索。首先我們通過檢查select的dom結(jié)構(gòu)可以發(fā)現(xiàn)，他里面的選項都是在dl下的dd標簽中，如圖。

然后我們獲取到dl標簽，然后通過循環(huán)的方式挨個去匹配dd中的選項與我們輸入的文本是否存在關系。通過indexOf就行。如果不相似，則直接隱藏掉，然后這里為什么要定義一個j呢？

是因為如果都不匹配的話，下面還是會出來一個空的dl標簽，頁面顯示就是一個空的小列表，有點影響美觀，所以如果你輸入的文本和下拉列表中的選項都沒關系的話，直接把dl給隱藏了。這里我是判斷不相似的個數(shù)如果和dl.length 相等的話，就說明你輸入的文本和select的選項沒一個相似的，然后就可以把dl隱藏了。

以上就是Layui實現(xiàn)input輸入和選擇的方法的詳細內(nèi)容，更多請關注創(chuàng)新互聯(lián)其它相關文章！