搜索框需用 input 事件配合 300ms 防抖（setTimeout + clearTimeout），防抖变量须置于闭包或 state 外层；后端接口应返回扁平 JSON 数组，路径为 /api/suggestions?q=xxx；下拉列表用 position: absolute + z-index 定位，包裹容器设 position: relative；点击建议项后须清空定时器、聚焦输入框并置光标至末尾。
搜索框的
事件监听必须防抖
用户每敲一个字就发请求，后端扛不住，前端也会卡顿。不加防抖时，连续输入 “react” 可能触发 5 次请求，其中 4 个响应都过期了，还可能覆盖掉最终结果。
用
+
实现最简防抖，延迟 300ms 再发请求
别用
——它无法捕获粘贴、语音输入等场景；
事件才真正反映值变化
防抖变量（如
）必须定义在闭包或组件 state 外层，否则每次渲染重置失效
后端接口要支持前缀匹配和返回 JSON 数组
搜索建议不是全文检索，是“以用户当前输入为前缀”的快速匹配。如果后端返回的是 HTML 片段、带分页的完整对象、或字段名不统一（比如有的叫
，有的叫
），前端解析会反复出错。
接口路径建议固定为
，
是必传 query 参数
响应体必须是扁平 JSON 数组，例如：
避免返回
这类包装结构——除非你明确在前端统一解包，否则容易漏判
字段
下拉列表要用
+
控制层级
常见问题是建议列表被轮播图、导航栏、fixed 定位元素遮挡，或者随页面滚动错位。这不是 JS 逻辑问题，是 CSS 层级没理清。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
包裹搜索框的容器（
inputsetTimeoutclearTimeoutkeyupinputdebounceTimersuggestionterm/api/suggestions?q=xxxq["react", "react native", "react router"]{ data: [...], code: 200 }dataposition: absolutez-index
）需设
position: relative
建议列表（
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，应直接在点击回调里隐藏列表
实际最难调的不是代码，是后端返回的数据格式是否稳定、前端是否把防抖 timer 绑定到了正确的生命周期里。这两个点一错，整个建议功能就变成“偶现可用”。