不是必须但推荐使用 input[type="search"]，因其可触发移动端原生搜索键盘、自动添加清空按钮和历史支持；需重置 Safari 样式并合理设置 autocomplete 属性。
搜索框必须用 input[type="search"] 吗？
不是必须，但推荐。用 input[type="search"] 能触发移动端原生搜索键盘（带“搜索”按钮），且部分浏览器会自动添加清空按钮和历史记录支持。如果用 input[type="text"]，iOS 键盘默认显示“回车”，用户得手动切到搜索键——实际转化率会低一截。
注意：input[type="search"] 在旧版 Safari 有样式 bug（圆角/内边距不一致），需加重置：
input[type="search"] {
-webkit-appearance: textfield;
outline: none;
}
别漏掉 autocomplete="off" ——否则浏览器可能覆盖热词推荐；若想保留地址栏建议但禁用表单内历史，用 autocomplete="search" 更精准。
热词推荐列表怎么绑定点击事件又不干扰搜索框焦点？
常见错误是给整个 .suggestion-list 容器绑 click，结果用户点空白处也触发，或点输入框时列表意外收起。正确做法是只监听 li 子项的点击，并在事件处理里主动调用 input.focus() 和 input.select()。
立即学习“前端免费学习笔记（深入）”；
- 用事件委托：给父容器绑
click，用e.target.matches('li')判断是否点中热词 - 点击后立即设置
input.value = e.target.textContent，再触发input.dispatchEvent(new Event('input'))，确保 Vue/React 等框架能响应 - 别忘了
e.preventDefault()防止点击时输入框失焦
响应式断点下热词数量怎么动态控制？
PC 端显示 8 个热词很合理，手机屏宽不够，硬塞 5 个就撑出横向滚动条——用户根本不会滑动看热词。直接用 CSS @media 控制 max-height 和 overflow-y 不够，得配合 JS 动态裁剪数据。
实操建议：
- PC（≥768px）：最多展示 6 个热词
- 平板（640px–767px）：最多 4 个
- 手机（text-overflow: ellipsis）
别用 window.innerWidth 实时监听 resize，开销大。改用 matchMedia 监听断点变化更轻量：
const media = window.matchMedia('(max-width: 639px)');
media.addEventListener('change', () => {
renderSuggestions(suggestions.slice(0, media.matches ? 3 : 6));
});
为什么热词点击后搜索框没提交？
多数人以为点了热词就该自动搜，其实 HTML 表单默认行为只响应 submit 事件或回车键。热词点击只是填值，没触发提交逻辑。
解决路径只有两条：
- 显式调用
form.submit()（前提是搜索框在<form>内） - 或者手动触发搜索函数，比如
performSearch(input.value)
关键陷阱：别在热词点击里直接写 location.href = '/search?q=' + value。这样会丢失 history.state，SPA 页面跳转后返回按钮失效。统一走路由 push 或 fetch 更稳妥。
热词本身应带 data-category 或 data-position 属性，方便埋点统计点击来源——这个细节上线后才补，基本等于没埋。
