[分享]css下拉框可以输入也可选择

在Web开发过程中，下拉框（Select）控件是非常常用的控件之一。但是，在一些情况下，仅仅提供可供选择的选项是不够的，我们还需要让用户可以输入内容以进行搜索。这个时候，就需要使用具有输入和选择功能的...

在Web开发过程中，下拉框（Select）控件是非常常用的控件之一。但是，在一些情况下，仅仅提供可供选择的选项是不够的，我们还需要让用户可以输入内容以进行搜索。这个时候，就需要使用具有输入和选择功能的下拉框。在CSS中，我们可以实现这样的效果。

首先，我们需要创建一个基础的下拉框控件。这可以通过标签来实现。例如：

 <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select> 

这个基本的下拉框控件会在页面上显示一个下拉列表，其中列出了四个不同的选项。

接下来，我们就可以使用CSS来增加可输入的功能了。我们可以使用JavaScript来实现这样的效果。例如：

 // 使用 JavaScript 获取下拉框控件元素
    var select = document.querySelector('select');

    // 添加 keyup 事件监听器
    select.addEventListener('keyup', function () {
        // 获取输入的文本
        var inputValue = this.value.toLowerCase();

        // 遍历所有选项
        Array.prototype.forEach.call(this.options, function (option) {
            // 比较选项文本和输入的文本
            var optionText = option.textContent.toLowerCase();
            if (optionText.indexOf(inputValue) !== -1) {
                option.style.display = 'block';
            } else {
                option.style.display = 'none';
            }
        });
    }); 

代码中，我们首先获取对应的下拉框控件元素，并添加了一个keyup事件监听器。每次用户在输入框中输入完毕后，就会触发这个事件。在事件监听器中，我们首先获取用户输入的文本，然后遍历所有的选项，通过比对选项文本和用户输入的文本，来进行筛选。如果选项与用户输入的文本匹配，则显示该选项，否则不显示该选项。

通过这样的方式，我们就可以实现一个具有输入和选择功能的下拉框控件，来帮助用户更加方便、快速地查找到自己所需要的选项。