layui select配合input实现动态模糊搜索

发布时间：2020-12-15 02:48:23 所属栏目：C语言来源：网络整理

导读：功能需求：select框可以自己输入，就是在下拉列表里找不到自己想要的选项就可以自己输入，同时还要支持模糊匹配功能 html代码：样式： 1 style 2 .select-search-input { 3 position : absolute ; 4 z-index 2 5 width 80% 6 } 7 / ? select部分： 1 div cl

功能需求：select框可以自己输入，就是在下拉列表里找不到自己想要的选项就可以自己输入，同时还要支持模糊匹配功能

html代码：

样式：

1 <style>
2     .select-search-input {
3         position: absolute;
4         z-index 25         width 80%6     }
7 </>

select部分：

 1 div class="layui-form-item layui-inline" 2     label ="layui-form-label" style="width:60px;">用户列表label 3     ="layui-input-inline"="width:150px;" 4         input type="text" name="selectInputUser" id class="layui-input select-search-input" value="" onkeyup="search();" autocomplete="off" 5         select name="user_id"="selectUser" lay-filter="off"="layui-select" lay-search 6             option value="">-不限-option 7             ="1">张三 8             ="2">李四 9             ="3">王二麻子10         select11     div12 >

其中input的几个style样式简单说一下：
position:absolute：在这里是让input和select在同一位置。
z-index:2 是为了让input在select上面。
width:80% 是为了不盖住select后面的小三角符号，select还可以点击。
autocomplete="off" 为了不自动填充input框，免得压盖select选项

JS代码：

 1 layui.use(['form','layedit','upload'],function () {
var form = layui.form
 3     form.on('select(selectUser)',1)">function (data) {   //选择并赋值给input框
 value：data.value
 文本：data.elem[data.elem.selectedIndex].text;
 6         var txt = data.elem[data.elem.selectedIndex].text;
 7         $("#selectInputUser").val(txt);
 8         $("#selectUser").next().find("dl").css({ "display": "none" });
 9         form.render();
10     });
11 
12     window.search = 13         var value = $("#selectInputUser").val();
14         $("#selectUser").val(value);
15 16         $("#selectUser").next().find("dl").css({ "display": "block"17         var dl = $("#selectUser").next().find("dl").children();
18         var j = -1;
19         for (var i = 0; i < dl.length; i++) {
20             if (dl[i].innerHTML.indexOf(value) <= -121                 dl[i].style.display = "none"22                 j++23             }
24             if (j == dl.length-125                 $("#selectUser").next().find("dl").css({ "display": "none"26 27         }
28     }
29 });

done!

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!