js实现带搜索功能的下拉框

要实现一个带搜索功能的下拉框，可以使用JavaScript结合HTML和CSS来完成。以下是一个简单的示例，展示了如何实现这一功能：

基础概念

HTML结构：创建一个输入框和一个用于显示选项的下拉列表。
CSS样式：美化输入框和下拉列表的外观。
JavaScript逻辑：实现搜索功能和动态显示匹配的选项。

示例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Searchable Dropdown</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="searchable-dropdown">
        <input type="text" id="searchInput" placeholder="Search...">
        <div id="dropdown" class="dropdown-content"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.searchable-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 div {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content div:hover {background-color: #f1f1f1}

JavaScript (script.js)

const data = [
    "Apple", "Banana", "Cherry", "Date", "Elderberry",
    "Fig", "Grape", "Honeydew", "Kiwi", "Lemon"
];

const searchInput = document.getElementById('searchInput');
const dropdown = document.getElementById('dropdown');

searchInput.addEventListener('input', function() {
    const searchValue = this.value.toLowerCase();
    dropdown.innerHTML = '';

    if (searchValue.length > 0) {
        const filteredData = data.filter(item => item.toLowerCase().includes(searchValue));
        filteredData.forEach(item => {
            const div = document.createElement('div');
            div.textContent = item;
            div.addEventListener('click', function() {
                searchInput.value = item;
                dropdown.style.display = 'none';
            });
            dropdown.appendChild(div);
        });
        dropdown.style.display = 'block';
    } else {
        dropdown.style.display = 'none';
    }
});

document.addEventListener('click', function(event) {
    if (!event.target.closest('.searchable-dropdown')) {
        dropdown.style.display = 'none';
    }
});