jquery自动下拉下拉框

基础概念

jQuery自动下拉下拉框是指使用jQuery库来实现的下拉选择框（select元素）的自动填充功能。用户输入时，下拉框会根据输入内容动态显示匹配的选项。

类型

基于文本匹配：根据用户输入的文本匹配下拉框中的选项。
基于数据源：从外部数据源（如JSON文件、API）获取数据并动态填充下拉框。

应用场景

搜索建议：在搜索框中输入内容时，显示相关的搜索建议。
地址选择：在用户输入地址时，自动填充匹配的城市、区域等信息。
产品筛选：在筛选产品时，根据用户输入的关键词自动显示匹配的产品类别。

示例代码

以下是一个基于文本匹配的jQuery自动下拉下拉框的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery AutoComplete Dropdown</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .autocomplete-items {
            position: absolute;
            border: 1px solid #d4d4d4;
            border-bottom: none;
            border-top: none;
            z-index: 99;
            top: 100%;
            left: 0;
            right: 0;
        }
        .autocomplete-items div {
            padding: 10px;
            cursor: pointer;
            background-color: #fff;
            border-bottom: 1px solid #d4d4d4;
        }
        .autocomplete-items div:hover {
            background-color: #e9e9e9;
        }
    </style>
</head>
<body>
    <select id="mySelect" style="width: 200px;">
        <option value="">请选择</option>
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="cherry">Cherry</option>
        <option value="date">Date</option>
    </select>

    <script>
        $(document).ready(function() {
            $('#mySelect').on('input', function() {
                var inputVal = $(this).val().toLowerCase();
                var options = $('#mySelect option');
                var autocompleteItems = $('<div class="autocomplete-items"></div>').insertAfter(this);

                options.each(function() {
                    if ($(this).text().toLowerCase().indexOf(inputVal) > -1) {
                        autocompleteItems.append($('<div>').text($(this).text()).click(function() {
                            $('#mySelect').val($(this).text());
                            autocompleteItems.empty().remove();
                        }));
                    }
                });

                if (autocompleteItems.children().length === 0) {
                    autocompleteItems.empty().remove();
                }
            });
        });
    </script>
</body>
</html>