1 <div class="layui-col-md4"> 2 <label class="layui-form-label">移交單位<span style="color:red">*</span></label> 3 <div class="layui-input-block"> 4 <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"> 5 <select type="text" id="hc_select" lay-filter="hc_select" autocomplete="off" placeholder="移交單位全稱" lay-verify="required" class="layui-select" lay-search> 6 <option value="111">111</option> 7 <option value="222">222</option> 8 <option value="333">333</option> 9 <option value="444">444</option> 10 <option value="555">555</option> 11 </select> 12 </div> 13 </div>
- 其中input的幾個style樣式簡單說一下。
position:absolute 在這裏是讓input和select在同一位置。
z-index:2 是爲了讓input在select上面。
width:80% 是爲了避免蓋住select後面的小三角符號，select還能夠點擊。
autocomplete="off" 爲了避免自動填充input框，省得壓蓋select選項css
- 而後是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隱藏了。