要让input输入框自动弹出搜索建议，需监听input事件动态渲染下拉列表，控制请求节流与取消、键盘导航、移动端触摸兼容及失焦清理等全流程。
怎么让 input 输入框自动弹出搜索建议
用 autocomplete="off" 是关不掉浏览器自带提示的，真要控制建议内容，得自己实现下拉列表。核心思路是监听 input 事件，实时查数据、渲染 <ul></ul> 列表，再用键盘和鼠标控制选中。
常见错误是把建议列表写死在 HTML 里，结果每次输入都重复追加；或者没清空旧列表，导致选项越叠越多。
- 建议容器必须动态创建或复用，每次触发
input前先innerHTML = "" - 搜索词至少输入 2 个字符再发请求，避免频繁调用 API 或遍历大数组
- 用
position: absolute定位下拉层，父容器设position: relative防止错位 - 点击外部区域或失焦时，记得移除下拉列表（监听
blur和document click）
如何用 fetch 加载远程搜索建议
后端接口一般返回 JSON 数组，比如 ["react", "redux", "remix"]，前端拿到后直接生成 <li> 插入下拉区。注意跨域和节流——连续快速输入时，前面的请求可能比后面的慢，得用 AbortController 取消过期请求。
示例片段：
let controller = null;
input.addEventListener('input', () => {
if (controller) controller.abort();
controller = new AbortController();
fetch(`/api/suggest?q=${input.value}`, { signal: controller.signal })
.then(r => r.json())
.then(data => renderSuggestions(data));
});
键盘操作怎么支持上下键和回车选中
光渲染列表不够，用户按 ↑、↓、Enter 时得有响应。关键点是维护一个当前高亮索引 highlightIndex，每次按键更新它，并同步给对应 <li> 加 class（比如 active）。
-
Enter触发时，取list.children[highlightIndex].textContent填回 input，并隐藏列表 -
Escape直接隐藏列表，不清空输入框 - 上下键循环切换：到顶再按 ↑ 跳到底，到底再按 ↓ 跳到顶
- 别忘了阻止默认行为，否则按
Enter会提交表单
为什么移动端点击建议项经常失效
因为 touchstart 和 click 事件冲突，iOS 上尤其明显。直接绑 click 可能延迟 300ms，且有时不触发。解决方案是统一用 touchend + click 双监听，或者更稳妥地——给每个 <li> 加 role="option" 并监听 mousedown（桌面）和 touchstart（移动）。
另一个坑是：列表高度超出视口时，position: absolute 会让它被裁剪。加一句 overflow: visible 到父容器，或改用 fixed 定位并手动计算 top/left。
真正难的不是画出来，而是让键盘、鼠标、触摸、失焦、异步加载、取消请求、滚动兼容全跑通——每个环节断一处，体验就卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
