下拉搜索选择 js

下拉搜索选择（Dropdown Search Selection）是一种常见的用户界面组件，它允许用户从一个预定义的列表中选择一个选项，或者通过搜索功能来查找并选择一个选项。这种组件在前端开发中非常实用，可以提高用户体验和数据选择的效率。

基础概念

下拉搜索选择组件通常包括以下几个部分：

输入框：用户可以在其中输入关键词进行搜索。
下拉列表：显示匹配的选项列表。
选择机制：用户可以通过点击或键盘操作选择一个选项。

类型

静态下拉选择：选项列表是固定的，不支持搜索功能。
动态下拉选择：选项列表可以通过搜索动态加载，支持模糊搜索和远程数据源。
多选下拉选择：允许用户选择多个选项。

应用场景

表单填写：如国家、城市、部门等选择。
数据过滤：如商品分类、用户角色等筛选。
配置设置：如主题、语言、通知设置等选择。

示例代码

以下是一个简单的静态下拉选择示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropdown Selection</title>
</head>
<body>
    <label for="country">选择国家:</label>
    <select id="country" name="country">
        <option value="china">中国</option>
        <option value="usa">美国</option>
        <option value="uk">英国</option>
        <option value="canada">加拿大</option>
    </select>
</body>
</html>

以下是一个简单的动态下拉选择示例，使用JavaScript实现搜索功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropdown Search Selection</title>
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
        .dropdown-content a:hover {background-color: #f1f1f1}
        .dropdown:hover .dropdown-content {
            display: block;
        }
        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }
    </style>
</head>
<body>
    <div class="dropdown">
        <input type="text" id="searchInput" placeholder="搜索国家...">
        <div class="dropdown-content" id="dropdownContent"></div>
    </div>

    <script>
        const countries = ["中国", "美国", "英国", "加拿大", "澳大利亚", "法国", "德国"];
        const searchInput = document.getElementById('searchInput');
        const dropdownContent = document.getElementById('dropdownContent');

        searchInput.addEventListener('input', function() {
            const filter = searchInput.value.toUpperCase();
            dropdownContent.innerHTML = '';
            if (filter.length > 0) {
                const filteredCountries = countries.filter(country => country.toUpperCase().includes(filter));
                filteredCountries.forEach(country => {
                    const a = document.createElement('a');
                    a.href = '#';
                    a.textContent = country;
                    a.addEventListener('click', function() {
                        searchInput.value = country;
                        dropdownContent.innerHTML = '';
                    });
                    dropdownContent.appendChild(a);
                });
            }
        });
    </script>
</body>
</html>