Layui實作input輸入與選擇的方法

Layui實作input輸入和選擇的方法：

HTML程式碼：

<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>

其中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知識請專注於PHP中文網的layui使用教程欄位。

以上是Layui實作input輸入與選擇的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！