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

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

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

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

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

更多l(xiāng)ayui知識請關(guān)注PHP中文網(wǎng)的layui使用教程欄目。

總結(jié)

以上是生活随笔為你收集整理的php layui实现添加input,Layui实现input输入和选择的方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。