datalist 不适合动态补全，仅适用于静态词表；应改用 input 事件监听、绝对定位下拉菜单、键盘导航与 aria 支持的自定义组件。
用 datalist 做自动补全，真能省事吗？
不能。它只适合填几个固定词，比如“北京”“上海”“广州”，一旦要动态加载、高亮匹配、支持键盘导航，datalist 就直接失效。
常见翻车点：option 不随输入变化、Safari 下不显示、按方向键没反应、选中后光标跳到末尾、无法监听选中事件。它不是“补全组件”，只是浏览器给的静态提示气泡。
如果你的搜索词来自数据库或 API，别碰 datalist —— 它和 autocomplete="off" 也完全无关，两者语义不同，混用纯属误导。
- 适用场景：国家列表、HTTP 状态码、枚举值等极简静态词表
- 不适用场景：用户输入实时过滤、拼音首字母匹配（如输“bj”出“北京”）、带 loading 状态、需样式定制
- 兼容性陷阱：iOS Safari 对
datalist支持极差，部分版本压根不触发下拉
input 事件监听必须替代 keyup
用 keyup 监听输入，会漏掉粘贴、语音输入、中文 IME 上屏、拖拽文本等所有非按键触发行为 —— 补全就断了。
正确做法是绑定 input 事件，并加长度判断和防竞态处理：
const input = document.querySelector('input[name="search"]');
let abortController;
input.addEventListener('input', () => {
const query = input.value.trim();
if (query.length res.json())
.then(data => renderSuggestions(data))
.catch(err => {
if (err.name !== 'AbortError') console.error(err);
});
});
- 必须检查
query.length > 2，避免无意义请求（如输“a”就查全库） - 每次新请求前调
abortController.abort()，否则“后发先回”会覆盖正确结果 - 别用节流（
throttle）代替 abort —— 节流压不住并发，仍会乱序
下拉菜单 DOM 位置必须脱离文档流
如果把建议列表写在 input 后面并用 display: block 显示，滚动页面时它会错位、被父容器 overflow: hidden 裁切、或者被其他绝对定位元素遮挡。
正确方式是用 position: absolute + 动态计算 top/left，锚定到 input 框左下角：
function positionDropdown() {
const rect = input.getBoundingClientRect();
dropdown.style.top = `${rect.bottom + window.scrollY}px`;
dropdown.style.left = `${rect.left + window.scrollX}px`;
dropdown.style.width = `${rect.width}px`;
}
- 必须监听
scroll和resize，重新计算位置（或用IntersectionObserver优化） - 务必设
z-index（至少 999），否则被弹窗、导航栏盖住 - 别用
fixed定位 —— 页面滚动时它会悬空不动，体验极差
键盘导航和屏幕阅读器支持不是加分项
只支持鼠标点击的补全，等于没做完。用户按 ↓ 键没反应、NVDA 读不出当前高亮项，就是功能残缺。
关键动作必须绑定：
- ↓ / ↑：移动高亮项（用
aria-activedescendant配合role="listbox"） - Enter / Tab：确认选中，填充输入框并关闭下拉
- Esc：关闭下拉，不修改输入值
- 鼠标 hover 或点击
role="option"元素时，同步更新高亮状态和 aria 属性
最易被忽略的是：高亮项必须有明确的 tabindex="-1"，且整个下拉容器要有 role="listbox" 和 aria-labelledby 关联输入框 —— 否则屏幕阅读器根本感知不到这是可交互的补全控件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
