下拉框模糊搜索
时间: 2023-07-08 20:18:13 浏览: 54
您可以使用JavaScript和HTML来实现下拉框模糊搜索。首先,您需要创建一个带有选项的下拉框,然后使用JavaScript编写代码来实现模糊搜索。以下是一个简单的示例代码:
HTML代码:
```
<select id="mySelect">
<option value="">请选择一个选项</option>
<option value="1">苹果</option>
<option value="2">香蕉</option>
<option value="3">橙子</option>
<option value="4">草莓</option>
<option value="5">葡萄</option>
</select>
```
JavaScript代码:
```
var input, filter, options, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
options = document.getElementById("mySelect").options;
for (i = 0; i < options.length; i++) {
if (options[i].text.toUpperCase().indexOf(filter) > -1) {
options[i].style.display = "";
} else {
options[i].style.display = "none";
}
}
```
在上面的代码中,我们首先获取输入框和下拉框的元素,然后获取输入框的值并将其转换为大写字母。接下来,我们循环遍历下拉框中的每个选项,并将其文本转换为大写字母。如果选项的文本包含输入框中的值,则将其显示出来,否则将其隐藏起来。最后,我们将所有匹配的选项显示出来。
您可以根据自己的需求进行修改和扩展此代码。