原生javascript实现搜索框联想需绑定input事件监听输入、过滤本地或api数据、动态渲染安全的ul列表并定位显示；支持点击/方向键选择、防抖请求、焦点管理及移动端适配。
用原生 JavaScript 实现搜索框联想，不依赖框架
直接写 JS 就能跑通，不需要引入 jQuery 或 Vue。核心是监听 input 事件、过滤数据、动态生成 <ul></ul> 列表并插入 DOM。
常见错误是把联想结果写死在 HTML 里，或者用 focus 代替 input 导致延迟响应。正确做法是：
- 给
<input type="text">绑定input事件（不是keyup，避免漏掉粘贴、语音输入） - 每次触发时清空旧的
<ul class="suggestions"></ul>，再根据当前值生成新项 - 用
textContent渲染建议项，防止 XSS（别用innerHTML拼接用户可控内容） - 用
position: absolute+z-index让下拉层浮在输入框下方，否则会被其他元素遮挡
搜索建议数据从哪来？本地数组 or 后端 API？
小项目直接用本地数组最稳，比如产品名、常见关键词列表；中大型项目必须走后端，否则数据无法实时更新，且前端暴露全部关键词有风险。
本地方案示例（放在 <script></script> 标签内）：
const suggestions = ['JavaScript', 'TypeScript', 'React', 'Vue', 'Webpack', 'Vite'];
input.addEventListener('input', () => {
const value = input.value.trim().toLowerCase();
const matches = suggestions.filter(s => s.toLowerCase().includes(value));
renderSuggestions(matches);
});
走 API 的关键点：
- 加防抖（
setTimeout+clearTimeout），避免每敲一个字都发请求 - 请求前检查
value.length >= 2，减少无效调用 - 用
fetch的AbortController取消上一次未完成的请求，避免旧结果覆盖新结果
点击联想项后如何自动填充并提交？
用户点选建议项，要同时做到两件事：填入输入框 + 触发搜索。不能只改 value 却不触发 input 事件，否则监听逻辑不会执行。
- 给每个
<li>绑定click事件，设置input.value = item.textContent - 紧接着手动触发
input.dispatchEvent(new Event('input', { bubbles: true })) - 如果还要自动提交，加一句
form.submit()，但得确保表单action和method已配置好 - 别忘了点击后隐藏下拉列表（设
display: none或移除节点），否则会残留
移动端和键盘操作支持容易被忽略
只支持鼠标点选，在 iPhone 或盲人用户场景下基本不可用。必须补全方向键（↑/↓）和回车键逻辑。
- 给
input加keydown监听，捕获ArrowDown、ArrowUp、Enter - 维护一个
activeIndex变量，按上下键切换高亮项（用classList.toggle控制.active类） - 按
Enter时，如果下拉可见且有高亮项，就取该项文本填入并提交 - 移动端需额外处理
touchstart，避免click300ms 延迟导致响应卡顿
最常漏的是焦点管理：用户用键盘操作时，输入框必须始终有 focus，否则按方向键没反应；点选后也要主动 input.focus()，不然光标消失影响连续输入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
