本文介绍如何利用原生 JavaScript 实现：当用户在文本输入框中实时输入时，自动筛选 下拉列表中 value 包含该输入值的 ，隐藏不匹配项，并将首个匹配项设为当前选中项。
本文介绍如何利用原生 javascript 实现：当用户在文本输入框中实时输入时，自动筛选 `
在表单交互中，常需实现“双向联动”：既支持从下拉菜单选择后回填输入框（如原问题中已实现的 onchange 逻辑），也需支持反向操作——即用户键入 ID 时，下拉框自动定位并高亮对应选项。这能显著提升数据录入效率与用户体验。
以下是一个轻量、无依赖、兼容现代浏览器（Chrome/Firefox/Safari/Edge）的原生 JavaScript 解决方案：
✅ 核心思路
- 监听输入框的 input 事件（而非 keyup），确保实时响应包括粘贴、删除等所有输入行为；
- 遍历所有可选
- 利用标准 DOM 属性 hidden 动态显示/隐藏选项（注意：hidden 不影响 value 读取，且语义清晰、无需 CSS 干预）；
- 自动将首个匹配项设为
? 完整示例代码
Find by customer ID: <input type="text" name="search" maxlength="6" id="search"><select name="custlist" id="custlist"><option value="" selected>—SELECT ONE—</option> <option value="100123">Customer 1</option> <option value="100124">Customer 2</option> <option value="100235">Customer 6</option> <!-- 更多选项... --></select>
// 工具函数：简化 DOM 查询
const el = (sel, par) => (par || document).querySelector(sel);
const els = (sel, par) => (par || document).querySelectorAll(sel);
// 获取关键元素
const elSearch = el("#search");
const elCustlist = el("#custlist");
const elsCustlistOpts = els("option:not([disabled])", elCustlist); // 排除禁用项
// 主逻辑：根据输入值筛选并选中选项
const selectCustlistOption = () => {
const search = elSearch.value.trim();
// 若输入为空，恢复全部选项可见，并清空选中值
if (!search) {
elsCustlistOpts.forEach(opt => opt.hidden = false);
elCustlist.value = "";
return;
}
// 筛选匹配项，并同步 hidden 状态
const filteredOpt = [...elsCustlistOpts].filter(elOpt => {
const match = elOpt.value.includes(search);
elOpt.hidden = !match;
return match;
});
// 自动选中首个匹配项（若存在）
elCustlist.value = filteredOpt.length ? filteredOpt[0].value : "";
};
// 绑定事件监听
elSearch.addEventListener("input", selectCustlistOption);
⚠️ 注意事项与最佳实践
- 性能友好：使用 input 事件 + Array.from() 或展开语法 [...nodeList] 转换静态 NodeList，避免重复查询 DOM；
- 空值处理：输入为空时主动重置所有
- 匹配逻辑灵活：当前使用 includes() 实现子串匹配（如输入 "100" 可匹配 "100123" 和 "100235"）；如需精确匹配，可替换为 elOpt.value === search；
- 无障碍兼容：hidden 属性对屏幕阅读器友好，但需确保视觉样式未意外覆盖（例如某些 CSS 重置了 [hidden] { display: block !important }）；
- 禁用选项保护：选择器 option:not([disabled]) 确保禁用项始终保留，不参与筛选逻辑；
- 不推荐用 display: none：直接操作 style.display 会破坏
该方案无需 jQuery，体积小、逻辑清晰、易于维护，可直接集成至任意现有表单中，是实现输入驱动下拉联动的理想实践。
