能用，但只适合极简场景；本质是静态提示列表，不支持动态过滤、异步加载、样式定制及完整键盘导航，仅适用于固定词表且无交互需求的低要求场景。
用 datalist 实现搜索框自动补全，到底行不行？
能用，但只适合极简场景。它本质是浏览器原生的“提示列表”，不是“自动补全控件”——用户输入时不会动态过滤，input 的值也不会被强制设为选项之一；选中后仅插入文本，不触发事件、不支持异步加载、无法定制样式或键盘行为。
常见错误现象：datalist 里的 option 不随输入实时更新；按方向键无法高亮选项；点击选项后光标跳到末尾、无法继续编辑；在 Safari 中部分版本甚至不显示下拉。
- 适用场景：静态词表（如国家名、固定状态码）、无交互需求、兼容性要求极低
- 不能替代
autocomplete="off"的语义控制，它和 autocomplete 属性无关 - 性能无负担，但毫无扩展性 —— 想加 loading 状态？加防抖？加远程请求？做不到
自定义方案必须处理的三个核心环节
真正可用的自动补全，得自己接管输入、匹配、渲染、交互四件事。其中最易被跳过却导致体验断裂的是这三环：
-
输入监听必须用
input事件而非keyup：否则粘贴、语音输入、IME 上屏等操作无法触发补全 -
匹配逻辑要区分大小写与模糊度：直接
includes()太弱，中文拼音首字母（如输“bj”匹配“北京”）需额外库或预处理字段 -
下拉菜单必须脱离
input流式布局：用position: absolute+top/left动态计算位置，否则滚动时错位、被 overflow:hidden 裁切
fetch + AbortController 是远程补全的底线配置
没做请求取消的远程补全，一定会出现“后发请求先返回、覆盖正确结果”的竞态问题。比如用户快速输入 “react”，依次发出 “r”、“re”、“rea”、“reac”、“react” 五个请求，但网络波动导致 “reac” 最后返回，就会把 “react” 的结果冲掉。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 每次新请求前调用
abortController.abort()，再新建一个new AbortController() - 在
fetch的signal选项里传入abortController.signal - catch 中显式检查
err.name === 'AbortError'，避免误报错误 - 不要依赖节流（throttle）代替 abort —— 节流压不住并发，只是少发几次，仍可能乱序
键盘导航和屏幕阅读器支持不是可选项
很多自定义方案只做了鼠标点击，结果用户按 ↓ 键没反应，或 NVDA 读不出当前高亮项。这不是“锦上添花”，而是功能残缺。
关键动作必须绑定：
-
ArrowDown/ArrowUp：移动高亮索引，超出范围时循环或停在边界 -
Enter：确认当前高亮项，同时触发change和input事件 -
Escape：收起下拉，恢复输入焦点 - 下拉容器加
role="listbox"，每个选项加role="option"和aria-selected
复杂点不在代码量，而在所有交互路径都要走通：鼠标悬停、键盘移动、回车确认、ESC 关闭、失焦关闭、点击外部关闭——少一条，就有人用不了。
