JS实现Select下拉列表模糊查询

"本文主要介绍如何在JavaScript中创建一个Select下拉列表类，该类支持输入模糊查询功能，便于用户快速找到所需选项。提供的代码示例简洁易懂，适用于需要增强下拉菜单用户体验的场景。" 在Web开发中，Select元素通常用于创建下拉列表，但原生的Select组件不支持输入模糊查询。为了提高用户交互性和查找效率，我们可以利用JavaScript自定义一个具有输入模糊查询功能的Select下拉列表。以下是一个简单的实现方法： 首先，我们需要在HTML中创建一个Select元素以及一个输入框，输入框用于模糊查询： ```html <SELECT id="selectOption" onchange="SelectValue(this)"> <!-- 下拉选项将在这里添加 --> </SELECT> <input type="text" id="txtSearch" onkeyup="InputValue(this)" placeholder="请输入搜索关键词"> ``` 在JavaScript中，我们可以定义一个函数`InputValue`来处理输入框的键入事件，实现模糊查询功能： ```javascript function InputValue(obj) { var n = 1; var tmpObj; var src = document.all.SelectOption; // 获取Select元素 var msg = document.all.msg; // 创建或获取提示信息容器 // 如果不是下箭头、上箭头或回车键，进行模糊查询 if (event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13) { if (obj.value != "") { msg.style.display = ""; // 显示提示信息容器 msg.innerHTML = ""; // 清空现有内容 // 遍历Select选项，根据输入值匹配并显示 for (var i = 0; i < src.length; i++) { if (src.options[i].text.indexOf(obj.value) !== -1) { var selValue = document.createElement("div"); // 创建一个新的div元素 var selText = document.createTextNode(src.options[i].text); // 创建文本节点，存储匹配的选项文本 selValue.appendChild(selText); // 把文本添加到div中 msg.appendChild(selValue); // 把div添加到提示信息容器中 } } } } } ``` 同时，我们需要一个`SelectValue`函数来处理用户在下拉列表中选择选项时的行为： ```javascript function SelectValue(obj) { var input = obj.parentNode.nextSibling; // 获取输入框 var selectedText = obj.options[obj.selectedIndex].text; // 获取选中项的文本 var selectedValue = obj.options[obj.selectedIndex].value; // 获取选中项的值 document.getElementById("txtSection").value = selectedText; // 更新其他字段（如隐藏的input）的值 alert(selectedValue); // 可以弹出选中值的提示，实际项目中可以替换为其他操作 } ``` 以上代码中，`InputValue`函数会在用户输入时实时更新下拉列表的显示，展示与输入值匹配的选项。`SelectValue`函数则在用户从下拉列表中选择一个选项后，更新相关字段的值。 通过这种方式，我们可以创建一个更加友好的下拉列表，不仅提供传统的下拉选择，还支持用户通过输入关键词快速定位选项，提高了用户体验。在实际应用中，可以根据需要调整样式和功能，例如添加动画效果、错误提示等。