自动完成核心是监听输入、实时匹配、动态展示建议；需用防抖控制时机，输入停顿200–300ms后匹配，取消前次未完成定时器，过滤空值或过短输入。
自动完成（Auto-complete）在 JavaScript 中的搜索提示功能，核心是监听用户输入、实时匹配数据、动态展示建议列表。关键不在于写多少代码，而在于控制好时机、性能和交互细节。
监听输入并防抖处理
直接监听 input 事件容易频繁触发请求或匹配，造成卡顿或多余计算。推荐用防抖（debounce）限制执行频率。
- 输入停顿 200–300ms 后再开始匹配或发请求
- 每次新输入都取消前一次未完成的定时器
- 对空字符串或过短输入（如长度
本地匹配 or 远程请求？按需选择
数据量小（比如城市名、常见关键词）适合前端本地过滤；数据量大或需实时更新（如商品、用户），应调后端接口。
- 本地匹配：用
Array.filter()+includes()或正则（注意大小写和中文支持） - 远程请求：用
fetch或axios，带上当前输入值作为参数，如/api/suggest?q=js - 记得给请求加
AbortController，避免旧请求返回时覆盖新结果
渲染建议列表并支持键盘操作
建议列表不是摆设，要能用上下键切换、回车选中、ESC 关闭——这才是完整体验。
立即学习“Java免费学习笔记（深入）”；
- 用
ul/li渲染候选词，每个li绑定data-value存真实值 - 监听
keydown：↑ ↓ 切换高亮项，Enter 填入输入框并触发搜索，ESC 隐藏列表 - 鼠标 hover 或键盘移动时，实时更新高亮样式（比如加
class="active"） - 选中后，把值填进输入框，并可触发自定义事件（如
onSelect）
隐藏逻辑与边界处理
很多 bug 出现在“看不见的地方”：焦点离开、点击外部、快速切换等场景。
- 点击输入框外区域或失去焦点（
blur）时，延迟 100ms 再隐藏列表（防点击到列表项失效） - 列表显示时，禁止浏览器默认的输入框自动补全（加
autocomplete="off"） - 建议数为 0 时主动清空并隐藏列表，别留个空框挂着
- 移动端注意
touchstart兼容，以及软键盘弹起时的滚动适配
基本上就这些。不复杂但容易忽略细节，比如没防抖卡死、没 abort 导致结果错乱、没处理 ESC 和 blur 就算交工了。先跑通本地匹配，再加网络请求，最后补全交互，节奏就稳了。
