原生 datalist 不支持实时搜索，仅前缀匹配且无法动态更新；真正可用方案是放弃 datalist，用 div 模拟下拉并监听 input 事件，配合防抖、abortcontroller 和 scrollintoview 等实现完整交互体验。
用 input + datalist 实现最简联想，但不支持实时搜索
原生 datalist 只在用户输入后点击下拉或按方向键时才匹配，不会监听 input 事件、不触发 AJAX、也不支持模糊匹配。它适合静态选项（比如浏览器地址栏历史），不适合“打字即搜”的场景。
常见错误现象：oninput 绑定后没反应，或者 datalist 选项始终不更新——因为 datalist 的 option 是静态 HTML，无法动态重写。
- 若数据量小且固定，可用 JS 手动清空并重写
datalist内的option，但 IE 不支持动态修改datalist - Chrome 120+ 支持
replaceChildren()更新datalist，但 Safari 仍不稳定 - 别依赖
list属性自动过滤：它只做前缀匹配，且不响应 JS 修改
真正可用的方案：自己画下拉 + 监听 input 事件
核心是放弃 datalist，用 div 模拟下拉框，配合 fetch 或本地数组过滤。关键点不在“怎么画”，而在“什么时候发请求”和“怎么防抖”。
使用场景：搜索商品、查用户、补全地址等需服务端返回的场景；或前端已有上万条数据需本地快速匹配。
- 必须加防抖：用户每敲一个字就发请求会压垮后端，用
setTimeout+clearTimeout控制，延迟 300ms 发送 - 输入为空、或长度
- 请求中要取消上一次未完成的
fetch：用AbortController，否则旧请求返回后覆盖新结果 - 匹配逻辑别只用
includes()：中文搜索常需拼音首字母或分词，可引入pinyin-match这类轻量库
let abortCtrl;
input.addEventListener('input', () => {
if (abortCtrl) abortCtrl.abort();
abortCtrl = new AbortController();
if (input.value.length r.json())
.then(data => renderDropdown(data));
});
下拉列表交互细节决定体验好坏
用户不是在看 demo，是在抢时间输入。光有数据还不够，焦点、键盘操作、滚动、点击反馈都得对齐原生行为。
- 用
ArrowDown/ArrowUp切换高亮项，Enter填入输入框并收起下拉——别用Tab，它会跳到下一个表单控件 - 鼠标悬停时高亮，但键盘操作时必须同步更新 hover 状态（用 class 切换，别依赖伪类）
- 下拉超出视口时，自动滚动到高亮项：用
element.scrollIntoView({ block: 'nearest' }) - 点击空白处或失焦（
blur）时收起下拉，但要在setTimeout里延时执行，否则点击下拉项会先触发 blur 再触发 click
移动端适配最容易被忽略的三个点
PC 上能跑通的逻辑，到手机上可能直接失效——不是代码问题，是交互预期变了。
- iOS Safari 的
input在软键盘弹出时，focus后不触发scrollIntoView，得手动window.scrollTo()调整位置 - 触摸屏没有 hover，所有“悬停高亮”逻辑要 fallback 到 touchstart/touchend，或统一用 active 状态
- 部分安卓浏览器对
position: absolute下拉框计算错高度，建议给父容器加transform: translateZ(0)强制硬件加速
复杂点不在 JS 逻辑，而在于边界：用户狂敲退格键时要不要清掉 pending 请求？搜索词含空格或特殊字符要不要 encode？服务端返回空数组，下拉该显示“无结果”还是直接隐藏？这些细节堆起来，才是真实项目里的联想框。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
