动态匹配下拉选项：根据输入框实时筛选并自动选中对应值-html教程-PHP中文网

动态匹配下拉选项：根据输入框实时筛选并自动选中对应值

本文介绍如何通过监听文本输入框的 input 事件，实时筛选中匹配用户输入的，并自动将其设为选中项，同时隐藏不匹配项，实现双向联动的搜索式选择体验。

本文介绍如何通过监听文本输入框的 `input` 事件，实时筛选 `

在表单交互中，常需实现“输入即匹配”的智能下拉行为：用户在文本框中键入内容（如客户ID），下拉菜单应即时过滤并高亮/选中首个匹配项。这比传统下拉选择更高效，尤其适用于长列表场景。

以下是一个轻量、现代且兼容性良好的实现方案，使用原生 JavaScript（无需 jQuery），基于 input 事件监听与 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>

// 工具函数：快捷获取单个/多个元素
const el = (sel, par) => (par || document).querySelector(sel);
const els = (sel, par) => (par || document).querySelectorAll(sel);

const elSearch = el("#search");
const elCustlist = el("#custlist");
// 排除禁用选项，只操作可选的 option
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 : "";
};

// 绑定 input 事件（支持键盘输入、粘贴、删除等所有输入方式）
elSearch.addEventListener("input", selectCustlistOption);

✅ 关键特性说明：

使用 input 事件而非 keyup，确保兼容剪贴板粘贴、语音输入、自动填充等所有输入方式；
采用 option.hidden = true 实现视觉过滤，语义清晰且不影响表单提交逻辑（隐藏选项仍保留在 DOM 中，仅不可见不可选）；
输入为空时自动重置：显示全部选项并清空选中值，避免残留状态；
支持子串匹配（如输入 "1001" 可匹配 "100123" 和 "100124"），适合 ID 类精确查找；若需前缀匹配，可将 includes() 替换为 startsWith()。

⚠️ 注意事项：