能用，但只适合极简场景；本质是静态提示列表，不支持动态过滤、异步加载、样式定制及完整键盘导航，仅适用于固定词表且无交互需求的低要求场景。

用 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” 的结果冲掉。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

实操建议：

• 每次新请求前调用 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 关闭、失焦关闭、点击外部关闭——少一条，就有人用不了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！