本文介绍如何利用原生 JavaScript 实现：当用户在文本框中输入时，动态过滤 下拉列表中的 元素，并自动选中首个匹配项，提升表单交互体验。
本文介绍如何利用原生 javascript 实现：当用户在文本框中输入时，动态过滤 `
在 Web 表单开发中，常需实现「双向联动」：既支持从下拉菜单选择后填充输入框（已实现），也需支持反向操作——即用户在输入框中键入内容时，自动定位并选中下拉中值匹配的选项。这不仅能提升用户体验，还能减少手动查找成本。
核心思路是监听输入框的 input 事件（而非 change），实时获取当前输入值，遍历所有可选项（排除禁用项），使用 String.prototype.includes() 进行模糊匹配（如输入 "1001" 可匹配 "100123" 和 "100124"），再通过 option.hidden 属性隐藏不匹配项，并将
以下是完整、可直接运行的实现代码：
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");
// 排除 disabled 选项，只操作可交互项
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;
}
// 过滤出 value 包含当前输入的选项
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 事件而非 keyup，确保兼容剪贴板粘贴、语音输入及移动端软键盘操作；
- option.hidden = true 是标准且轻量的隐藏方式（不影响语义和无障碍访问），比 display: none 更合适；
- 建议对长列表添加防抖（debounce），避免高频触发影响性能（本例数据量较小时可忽略）；
- 如需精确匹配（而非包含匹配），可将 includes() 替换为 === 或正则 ^${search}$；
- 若需保留“未匹配时显示提示选项”，可在 JS 中动态插入 。
该方案完全基于现代浏览器原生 API，无需 jQuery，简洁可靠，适用于各类客户信息、ID 检索类表单场景。
