带有输入的自定义选择中的动态滤镜

基础概念

带有输入的自定义选择中的动态滤镜是一种前端技术，它允许用户通过输入文本来实时过滤和显示一组选项。这种技术通常用于搜索框、下拉菜单或任何需要动态筛选数据的场景。

类型

文本过滤：根据用户输入的文本匹配选项。
数值过滤：根据用户输入的数值范围匹配选项。
日期过滤：根据用户选择的日期范围匹配选项。

应用场景

电子商务网站：在产品搜索中，用户可以通过输入关键词来过滤商品。
社交媒体平台：在用户搜索好友或内容时，可以通过输入关键词来过滤结果。
企业应用：在数据管理工具中，用户可以通过输入条件来过滤和查找特定的数据记录。

示例代码

以下是一个简单的HTML和JavaScript示例，展示了如何实现一个带有输入的自定义选择中的动态滤镜：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Filter Example</title>
    <style>
        .filter-input {
            margin-bottom: 10px;
        }
        .options {
            list-style-type: none;
            padding: 0;
        }
        .options li {
            padding: 5px;
            border: 1px solid #ccc;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <div class="filter-input">
        <input type="text" id="filterInput" placeholder="Filter options...">
    </div>
    <ul class="options" id="optionsList">
        <li>Apple</li>
        <li>Banana</li>
        <li>Cherry</li>
        <li>Orange</li>
        <li>Pineapple</li>
    </ul>

    <script>
        const filterInput = document.getElementById('filterInput');
        const optionsList = document.getElementById('optionsList');
        const options = optionsList.querySelectorAll('li');

        filterInput.addEventListener('input', (event) => {
            const filterText = event.target.value.toLowerCase();

            options.forEach(option => {
                const optionText = option.textContent.toLowerCase();
                if (optionText.includes(filterText)) {
                    option.style.display = 'block';
                } else {
                    option.style.display = 'none';
                }
            });
        });
    </script>
</body>
</html>