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

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

html代码：

样式：

<style>
    .select-search-input {
        position: absolute;
        z-index: 2;
        width: 80%;
    }
</style>

 

select部分：

<div class="layui-form-item layui-inline">
    <label class="layui-form-label" style="width:60px;">用户列表</label>
    <div class="layui-input-inline" style="width:150px;">
        <input type="text" name="selectInputUser" id="selectInputUser" class="layui-input select-search-input" value="" onkeyup="search();" autocomplete="off">
        <select name="user_id" id="selectUser" lay-filter="selectUser" autocomplete="off" class="layui-select" lay-search>
            <option value="">-不限-</option>
            <option value="1">张三</option>
            <option value="2">李四</option>
            <option value="3">王二麻子</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(selectUser)', function (data) {   //选择并赋值给input框
        // value：data.value
        // 文本：data.elem[data.elem.selectedIndex].text;
        var txt = data.elem[data.elem.selectedIndex].text;
        $("#selectInputUser").val(txt);
        $("#selectUser").next().find("dl").css({ "display": "none" });
        form.render();
    });

    window.search = function () {
        var value = $("#selectInputUser").val();
        $("#selectUser").val(value);
        form.render();
        $("#selectUser").next().find("dl").css({ "display": "block" });
        var dl = $("#selectUser").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) {
                $("#selectUser").next().find("dl").css({ "display": "none" });
            }
        }
    }
});

done!