实现下拉框实时搜索

最新推荐文章于 2024-03-28 18:10:19 发布

原创最新推荐文章于 2024-03-28 18:10:19 发布 · 984 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #jquery #html

本文介绍了如何根据输入值实现下拉框的实时搜索功能。通过在页面加载时获取下拉框内容并存储到数组中，监听输入框的值变化及鼠标移出事件，动态地重新渲染下拉选项。

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

背景

最近我的小伙伴提出了一个问题,下拉框选择内容的时候可以根据输入的值,实时搜索下拉的内容,刚好我前两天看到一个实现下拉多选的帖子,让我有了想法.在页面加载完成时,获取下拉的内容,存放在一个数组里,监听输入框的值变化和鼠标移出事件,重新渲染下拉内容.

js代码

定义全局变量数组,用于存放下拉选项的值

		var data = new Array();

reload函数用于重新渲染下拉选项,传入三个参数,分别是下拉框的id,数组和输入框输入的值

        function reload(id, data, str) {
            var htm = "";
            htm += '<option value=""></option>'
            for (var i = 0; i < data.length; i++) {
                if (data[i].indexOf(str) != -1) {
                    htm += '<option value="' + data[i] + '">' + data[i] + '</option>'
                }
            }
            var e = document.getElementById(id);
            e.innerHTML = htm;
        }

getOption函数用于把下拉框的option的值赋值给data数组,并且在页面加载完成时赋值

        function getOption() {
            $("#MainContent_sPa60_DropdownList1_NameC option").each(function () {
                var txt = $(this).val();
                if (txt != "") {
                    data.push(txt);
                }
            })
            //console.log(data);
        }
        $(document).ready(getOption);

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>动态下拉</title>
    <script src="jquery.js"></script>
</head>

<body>   
    <input type="text" id="ins" value="" style="width:400px;height:32px;">
    <select id="sel" style="width:400px;height:32px;display: none;">
        <option value=""></option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="南京">南京</option>
        <option value="苏州">苏州</option>
        <option value="南通">南通</option>
        <option value="台湾">台湾</option>
    </select>
    <script>
        //定义全局变量数组,用于存放下拉选项的值
        var data = new Array();

        //重新加载下拉选项
        function reload(id, data, str) {
            var htm = "";
            htm += '<option value=""></option>'
            for (var i = 0; i < data.length; i++) {
                if (data[i].indexOf(str) != -1) {
                    htm += '<option value="' + data[i] + '">' + data[i] + '</option>'
                }
            }
            var e = document.getElementById(id);
            e.innerHTML = htm;
        }

        //获取所有下拉选项值,赋值给data
        function getOption() {
            $("#sel option").each(function () {
                var txt = $(this).val();
                if (txt != "") {
                    data.push(txt);
                }
            })
            //console.log(data);
        }
        $(document).ready(getOption);

        //监听是否点击和鼠标移出,重新加载下拉选项,点击后让下拉框显示
        $("#ins").on("click", function () {
            reload("sel", data, $("#ins").val());
            $("#sel").css('display', 'block')
        })
        $("#ins").on("mouseout", function () {
            reload("sel", data, $("#ins").val());
        })

        //监听下拉选中的值改变,赋值给输入框,并隐藏下拉框
        $("#sel").on('change', function () {
            $("#ins").val($("#sel").find("option:selected").text());
            $("#sel").css('display', 'none')
        })
        
        //监听点击input和select之外的地方,隐藏下拉框
        $(document).bind("click", function (e) {
            if ($(e.target).closest("#ins").length == 0 && $(e.target).closest("#sel").length == 0) {
                $("#sel").css('display', 'none')
            }
        });
    </script>
</body>

</html>