HTML项目实战如何开发带有搜索联想与历史记录的输入框组件

开发带搜索联想和历史记录的输入框需用原生HTML+JS串联输入事件、异步请求与本地存储：输入防抖（≥2字符触发，AbortController取消冗余请求）、联想限5条；localStorage存最多10条去重历史（unshift入栈）；下拉分两区块渲染，支持高亮匹配、键盘导航、点击/回车选中、失焦延迟隐藏及历史项单独删除。

要开发一个带搜索联想和历史记录的输入框组件，核心是把输入事件、异步请求、本地存储和 UI 更新三块逻辑串起来。不需要框架也能做，用原生 HTML + JavaScript 就够了，关键是理清触发时机和数据流向。

监听输入并防抖触发联想

用户每敲一个字就发请求会浪费资源，必须加防抖。输入框绑定 input 事件，用 setTimeout 延迟执行联想逻辑，中间有新输入就清除上一次定时器。

1. 只在输入长度 ≥ 2 时才发起联想请求，避免无效查询
2. 每次发起新请求前取消上一个未完成的 fetch（用 AbortController）
3. 联想结果建议限制条数（比如最多 5 条），避免列表过长影响体验

用 localStorage 管理搜索历史

历史记录不是实时同步的，适合存在本地。每次成功提交搜索（比如按回车或点击某条联想项），就把关键词去重后存入数组，再写入 localStorage。

1. 读取时先检查是否存在，不存在就初始化空数组
2. 添加新记录前用 filter 去重，再用 unshift 插到开头，保持最新在前
3. 最多保留最近 10 条，超出则 pop 掉最旧的

联动渲染联想与历史两套列表

下拉面板里分两个区块：顶部是“搜索建议”，下面是“历史搜索”。它们共用同一个下拉容器，但数据源不同，渲染逻辑要分开处理。

1. 联想结果来自接口，历史来自本地存储，两者都用 map 生成 li 元素
2. 点击任一选项时，自动填入输入框并收起下拉层，同时触发搜索动作
3. 鼠标悬停或键盘上下键可高亮当前项，回车确认选中项（需监听 keydown）

样式与交互细节不能漏

视觉反馈直接影响可用性。下拉面板要脱离文档流定位，遮挡层级设高，且宽度严格对齐输入框。

1. 输入框获得焦点时才显示下拉层，失焦延迟 200ms 后隐藏（防止点到选项时意外收起）
2. 历史记录项右侧加 × 图标，点击可单独删除，不干扰主搜索流程
3. 联想项中高亮匹配关键词（比如把 “苹果” 中的 “苹” 加 em 标签并设颜色）

不复杂但容易忽略。重点不在写多少代码，而在每个状态变化是否都有明确响应——输、停、选、删、失焦，每个动作都要有归宿。