layui select 可输入可搜索

桔子爱笑

于 2020-09-14 13:42:30 发布

阅读量2.2k

点赞数 2

分类专栏： layui

本文链接：https://blog.youkuaiyun.com/juziaixiao/article/details/108577627

版权

layui 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的下拉选择框功能，通过JS监听选择事件，将选中的值显示在输入框中，并通过keyup和focus事件实时更新下拉选项的显示，提供了一个动态且响应式的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码

 <input type="text" value=" "  id="HandoverCompany" class="layui-input" style="position:absolute;z-index:2;"
                   lay-verify="required" οnkeyup="search()" οnfοcus="search()" autocomplete="off">

            <select name="supplier_id"  id="hc_select" lay-filter="hc_select" >
                <option value="1">1</option>
                <option value="2">2</option>
                    <option value="3">3</option>
                        <option value="4">4</option>
            </select>

js代码

 form.on('select(hc_select)', function (data) {   //选择移交单位 赋值给input框
            $("#HandoverCompany").val($(this).html());
            $("#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" });
                }
            }

        }