HTML原生autocomplete仅提示浏览器填充类型，不提供下拉列表或JS逻辑；可控补全需input事件+AbortController防竞态；datalist适合静态候选词；手写键盘导航易出错，应优先用成熟库。
HTML 原生 autocomplete 属性能做什么、不能做什么
原生 autocomplete 只负责告诉浏览器“这个输入框想填什么类型的数据”，比如 autocomplete="name" 或 autocomplete="email"，它不提供下拉建议列表，也不触发任何 JS 逻辑。浏览器是否弹出提示、弹出哪些历史值，完全由用户本地设置和浏览器实现决定——你无法控制内容、样式、触发时机，也不能绑定搜索接口。
常见误用：autocomplete="on" 或 autocomplete="off" 在现代浏览器中基本失效；autocomplete="new-password" 这类特殊值只对密码字段有意义，乱用反而干扰 autofill。
- 适合场景：表单字段语义明确（如地址、电话），且只需复用用户已存的本地数据
- 不适合场景：需要实时查后端、按关键词过滤、展示自定义描述或图标
- 兼容性无坑，但功能边界极窄——它不是“自动补全组件”，只是“自动填充提示”
用 input + keydown + fetch 实现最小可行补全
真正可控的自动补全，得自己监听输入、发请求、渲染列表。核心是避免卡顿和竞态：用户快速打字时，上一个请求返回的结果可能已经过期。
const input = document.querySelector('input[name="search"]');
let abortController;
input.addEventListener('input', async () => {
const query = input.value.trim();
if (!query) return;
// 中断上一次请求
abortController?.abort();
abortController = new AbortController();
try {
const res = await fetch(`/api/suggest?q=${encodeURIComponent(query)}`, {
signal: abortController.signal
});
const suggestions = await res.json();
renderSuggestions(suggestions); // 自己实现 DOM 渲染
} catch (err) {
if (err.name !== 'AbortError') console.error(err);
}
});
- 必须用
input事件而非keyup，否则会漏掉粘贴、语音输入等场景 -
AbortController是防竞态最轻量的方案，不用引入防抖库也能保证只处理最新请求 - 后端接口要支持
q参数，并返回数组（如[{"value":"react","label":"React.js"}]） - 注意：别在每次
input都发请求，加个长度阈值（如query.length > 2）更合理
用 datalist 快速实现静态候选词补全
如果候选词固定、数量少（比如 10 个以内城市名），datalist 是零 JS 的最优解。它原生支持键盘上下键选择、回车确认，且不依赖任何框架。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
<input list="cities" name="city"> <datalist id="cities"> <option value="Beijing"> <option value="Shanghai"> <option value="Guangzhou"> </datalist>
- 仅支持完全匹配前缀（输入 “Bei” 会显示 “Beijing”，但 “jing” 不会）
- 不能动态更新
option，改完 DOM 后需重新聚焦才能生效 - Chrome 和 Edge 支持最好；Firefox 会把
datalist当作纯提示，不阻止用户输入任意值；Safari 对空格、中文支持偶有异常 - 适合配置项、枚举型字段，不适合搜索场景
为什么不要自己写键盘导航逻辑？
手动监听 ArrowDown、Enter 并模拟焦点切换，看似简单，实际要处理的边界极多：列表滚动位置、无障碍支持（ARIA）、失焦时清空、Esc 关闭、鼠标点击与键盘行为同步……这些已有成熟方案覆盖。
- 推荐直接用
downshift（React）或awesomplete（原生 JS），它们已解决 focus 管理、ARIA 标签、移动端适配等问题 - 若必须手写，至少给下拉容器加
role="listbox"，每个选项加role="option"和aria-selected，否则屏幕阅读器无法识别 - 最常被忽略的一点：补全列表必须用
position: absolute且z-index足够高，否则会被父级overflow: hidden截断
补全的核心从来不是“怎么显示列表”，而是“什么时候发请求、怎么防抖/防竞态、怎么让键盘和鼠标操作一致”。细节堆起来，比写个 API 还费神。
