js 下拉列表搜索

在JavaScript中实现下拉列表的搜索功能，通常涉及到HTML、CSS和JavaScript的基本知识。下面我会给出一个简单的示例，展示如何创建一个可搜索的下拉列表。

HTML结构

<div class="searchable-dropdown">
    <input type="text" placeholder="Search..." id="dropdown-search"/>
    <div class="dropdown-content" id="dropdown-content">
        <div class="dropdown-item">Apple</div>
        <div class="dropdown-item">Banana</div>
        <div class="dropdown-item">Cherry</div>
        <div class="dropdown-item">Date</div>
        <div class="dropdown-item">Elderberry</div>
    </div>
</div>

CSS样式

.searchable-dropdown {
    position: relative;
    display: inline-block;
}

#dropdown-search {
    width: 200px;
    box-sizing: border-box;
}

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

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

.searchable-dropdown.show .dropdown-content {
    display: block;
}

JavaScript代码

document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('dropdown-search');
    const dropdown = document.querySelector('.searchable-dropdown');
    const dropdownContent = document.getElementById('dropdown-content');
    const dropdownItems = dropdownContent.getElementsByClassName('dropdown-item');

    searchInput.addEventListener('keyup', function() {
        const filter = searchInput.value.toLowerCase();
        let visibleItems = 0;

        for (let i = 0; i < dropdownItems.length; i++) {
            const item = dropdownItems[i];
            if (item.textContent.toLowerCase().indexOf(filter) > -1) {
                item.style.display = '';
                visibleItems++;
            } else {
                item.style.display = 'none';
            }
        }

        // Show or hide the dropdown based on the number of visible items
        if (visibleItems > 0) {
            dropdown.classList.add('show');
        } else {
            dropdown.classList.remove('show');
        }
    });

    // Toggle the dropdown visibility when clicking on the input field
    searchInput.addEventListener('click', function() {
        dropdown.classList.toggle('show');
    });

    // Close the dropdown when clicking outside of it
    window.addEventListener('click', function(event) {
        if (!event.target.matches('#dropdown-search')) {
            dropdown.classList.remove('show');
        }
    });
});

解释

HTML: 创建一个输入框和一个包含下拉项的容器。
CSS: 设置样式以控制下拉列表的外观和显示/隐藏行为。
JavaScript:
- 监听输入框的 keyup 事件，根据输入内容过滤下拉列表中的项。
- 根据过滤结果显示或隐藏下拉列表。
- 点击输入框时切换下拉列表的显示状态。
- 点击输入框外部时关闭下拉列表。