搜索框需用 input 事件配合 300ms 防抖（setTimeout + clearTimeout），防抖变量须置于闭包或 state 外层；后端接口应返回扁平 JSON 数组，路径为 /api/suggestions?q=xxx；下拉列表用 position: absolute + z-index 定位，包裹容器设 position: relative；点击建议项后须清空定时器、聚焦输入框并置光标至末尾。
搜索框的 input 事件监听必须防抖
用户每敲一个字就发请求，后端扛不住，前端也会卡顿。不加防抖时，连续输入 “react” 可能触发 5 次请求，其中 4 个响应都过期了，还可能覆盖掉最终结果。
- 用
setTimeout+clearTimeout实现最简防抖，延迟 300ms 再发请求 - 别用
keyup——它无法捕获粘贴、语音输入等场景；input事件才真正反映值变化 - 防抖变量（如
debounceTimer）必须定义在闭包或组件 state 外层，否则每次渲染重置失效
后端接口要支持前缀匹配和返回 JSON 数组
搜索建议不是全文检索，是“以用户当前输入为前缀”的快速匹配。如果后端返回的是 HTML 片段、带分页的完整对象、或字段名不统一（比如有的叫 suggestion，有的叫 term），前端解析会反复出错。
- 接口路径建议固定为
/api/suggestions?q=xxx，q是必传 query 参数 - 响应体必须是扁平 JSON 数组，例如：
["react", "react native", "react router"] - 避免返回
{ data: [...], code: 200 }这类包装结构——除非你明确在前端统一解包，否则容易漏判data字段
下拉列表要用 position: absolute + z-index 控制层级
常见问题是建议列表被轮播图、导航栏、fixed 定位元素遮挡，或者随页面滚动错位。这不是 JS 逻辑问题，是 CSS 层级没理清。
- 包裹搜索框的容器（
<div class="search-container">）需设position: relative - 建议列表（
<ul class="suggestions">）设position: absolute; top: 100%; left: 0; z-index: 1000 - 禁止给列表加
transform或will-change——这会创建新层叠上下文，导致z-index失效
点击建议项后要主动清空防抖定时器并聚焦输入框
用户点中一个建议词，输入框填入内容，但光标没在末尾、键盘没弹起、后续输入仍被防抖拦截——这是交互断裂的典型表现。
立即学习“前端免费学习笔记（深入）”；
- 点击建议项后，立即调用
inputElement.focus()并inputElement.setSelectionRange(inputElement.value.length, inputElement.value.length) - 必须手动清除正在等待的
debounceTimer，否则松手后可能又触发一次旧请求 - 别依赖
blur事件来关闭下拉列表——移动端点击建议后，input元素未必 blur，应直接在点击回调里隐藏列表
