自动补全需监听input事件并实现匹配逻辑，而非依赖autocomplete="on"；须用debounce防抖、处理中英文输入、支持键盘导航与光标精准插入。

自动补全的核心是 input 事件 + 匹配逻辑，不是靠 autocomplete="on"

浏览器原生的 autocomplete="on" 只负责表单历史记忆（如邮箱、地址），和你想要的「输入关键词实时弹出候选词」完全无关。真要实现搜索框/代码编辑器那种补全，必须自己监听 input，维护候选列表，并控制 position: absolute 的下拉面板显隐。

debounce 是必须加的，否则高频触发直接卡死 UI

用户每敲一个键就发请求或遍历数组？CPU 和服务器都扛不住。必须用防抖控制频率：

function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

const handleInput = debounce((value) => {
  if (value.length < 2) return;
  const matches = dictionary.filter(word => word.startsWith(value));
  renderDropdown(matches);
}, 200); // 200ms 内只执行最后一次

• 延迟设太短（如 50ms）仍可能连发；设太长（如 800ms）则响应肉眼可见滞后
• 移动端要考虑 compositionstart/compositionend，避免中文输入法未上屏时就触发匹配
• 如果候选数据来自后端，debounce 还得配合取消上一个 fetch（用 AbortController）

匹配策略决定体验上限：前缀匹配 ≠ 模糊匹配 ≠ 编辑距离

用户输 "rea"，该返回 ["react", "reading", "realtime"] 还是也包含 "area"？取决于场景：

• 搜索框：用 includes() 或正则 /rea/i 做子串匹配更友好
• 代码提示：优先前缀匹配（word.startsWith(input)），再 fallback 到首字母缩写（如 "map" → "Map.prototype.forEach"）
• 高阶需求：引入轻量库如 fuse.js 支持模糊搜索，但注意它默认开销比 filter 大 3–5 倍
• 别忽略大小写：统一转小写比对，但渲染时保留原始大小写

键盘导航和回车确认是补全闭环的关键

光靠鼠标点候选词不够专业。用户习惯用 ↑/↓ 切换、Enter 确认、Esc 关闭：

立即学习“Java免费学习笔记（深入）”；

input.addEventListener('keydown', (e) => {
  if (!dropdownOpen) return;

  switch(e.key) {
    case 'ArrowDown':
      e.preventDefault();
      selectNextItem();
      break;
    case 'ArrowUp':
      e.preventDefault();
      selectPrevItem();
      break;
    case 'Enter':
      e.preventDefault();
      insertSelectedItem();
      break;
    case 'Escape':
      closeDropdown();
      break;
  }
});

• 必须调用 e.preventDefault()，否则 Enter 会触发表单提交
• ArrowDown/ArrowUp 要循环切换（到末尾再按 ↓ 跳回第一个）
• 选中项建议用 aria-selected="true" 和 CSS :focus 双重标记，兼顾可访问性