搜索框应使用实现语义化与原生功能，必设name属性，合理配置autocomplete和placeholder，配合防抖（300ms）、Event.preventdefault()拦截表单默认提交，并保留结构以保障无障碍与交互完整性。
搜索框本质就是 <input type="search">，别搞复杂了
浏览器原生就支持搜索框语义化，<input type="search"> 不仅自动带清空按钮（X）、历史下拉（部分浏览器），还触发移动端专用键盘（带“搜索”回车键）。用 type="text" 纯属浪费语义和体验。
- 必须加
name属性（如name="q"），否则表单提交时参数不会被发送 - 建议配
autocomplete="off"或autocomplete="search"—— 前者禁用输入历史，后者启用搜索建议（chrome 支持） - 别手动加图标或“搜索”文字占位；用
placeholder="搜点啥..."更轻量、可访问性更好
防抖不是 js 选修课，是搜索框的必填项
用户每敲一个字就发请求？服务器和用户体验都会崩。真实场景里，input 事件高频触发，必须节流或防抖——推荐防抖（debounce），等用户停顿再查。
- 别用
setTimeout手写防抖还忘了clearTimeout，容易内存泄漏；直接用 Lodash 的_.debounce，或手写时确保每次触发前清除上一个定时器 - 延迟设 300ms 是经验值：短于 200ms 用户感觉不到响应，长于 500ms 显得卡顿
- 首次聚焦/清空后立即触发一次请求？可以，但要加判断：
if (value.trim()) { doSearch(value) }
form 提交时刷新页面？那说明你没拦住默认行为
现代搜索框基本都是无刷新的，但很多人忘了 event.preventDefault()，一按回车整个页面 reload，搜索词全丢。
- 监听
form的submit事件，不是input的keypress—— 回车在input里触发submit，这是标准行为 - 即使用了 ajax，也得在
form.onsubmit = e => { e.preventDefault(); fetch(...); }，漏掉这句等于白做 - 别为了省事把
<form></form>直接删掉——会丢失语义、无障碍支持（如屏幕阅读器识别搜索区域）和回车提交逻辑
移动端软键盘不弹出“搜索”按钮？检查 type 和 enterkeyhint
ios safari 和 android Chrome 都认 type="search"，但部分安卓 webview 或旧版需要额外提示。
立即学习“前端免费学习笔记（深入）”；
-
type="search"是基础，必须有；否则键盘默认是“回车”而非“搜索” - 加
enterkeyhint="search"（html5 属性），明确告诉输入法该显示什么按钮，兼容性比只靠type更稳 - 别用
inputmode="search"替代type—— 它只影响键盘类型（比如数字键盘），不触发搜索语义和清空按钮
实际最常被忽略的，是 form 元素的存在意义和 submit 事件拦截的时机。很多人只盯着 input 操作，却让 form 默认行为悄悄毁掉整个交互链路。