搜索按钮应根据是否走表单提交流程选择 type="submit" 或 type="button"：需跳转或后端处理用 submit，需 JS 控制（防抖、API 调用）则必须用 button 并阻止默认行为。
搜索按钮该用 type="submit" 还是 type="button"
取决于你是否想走表单默认提交流程。如果搜索后要跳转到 /search?q=xxx 或交给后端处理，就用 type="submit"；如果要用 JS 调 API、防抖、渲染结果到当前页，必须用 type="button"——否则点一下就刷新页面，fetch 请求根本发不出去。
常见错误：把按钮塞进 <form></form> 却没设 type，浏览器按默认 submit 处理；或者用了 type="submit" 却在 JS 里忘了 event.preventDefault()，导致页面跳转中断逻辑。
- 用
type="submit"时，<form action="/search" method="get"></form>是完整闭环，URL 自动拼参，适合简单跳转场景 - 用
type="button"时，按钮和输入框可分离（甚至不在同一父容器），但必须手动绑定click事件并读取document.getElementById("search-input").value - 别给按钮加
form属性试图“绑定”某个表单——容易引发隐式提交，尤其在 Safari 中行为不一致
input type="search" 的 search 事件怎么监听才不丢触发
search 事件只在用户主动结束输入时触发：点清空按钮、按回车、或失焦（blur）——但它不保证覆盖所有场景。Safari 在点击 × 后可能不发 input 事件，只发 search；而 Chrome 对粘贴后直接按回车的支持更稳定。
所以不能只靠 search 做实时响应，但它是清理和提交的可靠信号点。真正做防抖搜索，得用 input 事件 + AbortController，而 search 事件适合做兜底确认或清空后重置状态。
立即学习“前端免费学习笔记（深入）”；
- 监听写法：
el.addEventListener("search", () => { const q = el.value.trim(); if (q) doSearch(q); }); - 注意：
search触发时el.value已是最终值（含清空后的空字符串），不用再判断event.inputType - 移动端软键盘“搜索”键会触发
search，但“回车”键不一定——取决于是否在合法<form></form>内且有name属性
搜索框匹配流程：前端过滤 vs 后端请求
小规模静态页面（比如几十个文档链接）用 JS 本地过滤够用；内容超过百条、带权重排序或需全文检索，必须走后端接口。两者流程差异大，别混着写。
本地过滤示例中，pages.filter(p => p.title.toLowerCase().includes(q)) 是典型线性匹配，不区分大小写但不支持模糊、拼音或分词——用户搜“安裝”就找不到“安装指南”。真要提升体验，得引入 fuse.js 或类似轻量库。
- 前端过滤：数据存在 JS 变量里，
q.length > 0才执行.filter()，结果直接replaceChildren()渲染到#search-results - 后端请求：必须设
data-api-endpoint属性注入地址，fetch 时用signal: abortController.signal配合防抖，避免上一个请求未返回时新请求覆盖 - 无论哪种，都得处理空结果：
results.length === 0 ? "<small>无匹配结果</small>" : ...，别留白或报错
为什么搜索框总在移动端表现异常
核心原因不是代码写错，而是缺失三个关键条件：没包在 <form></form> 里、input 缺 name 属性、没设 inputmode="search"。这三者缺一，iOS 键盘就显示“回车”，Android 显示“前往”，而不是“搜索”。
另外，autocomplete="off" 在 Chrome 88+ 后基本失效，得换成 autocomplete="nope" 或动态生成 name 值（比如加时间戳），否则历史记录下拉会干扰实时搜索。
- Safari iOS 上，脱离
<form></form>的type="search"根本不显示 × 按钮，也收不到search事件 - 安卓部分浏览器对
inputmode="search"支持更好，但若form的action是"#"或空，仍会触发页面跳转 - 别依赖
::-webkit-search-cancel-button统一样式——Firefox 不认，而且它只在 WebKit 内核生效，无法跨浏览器隐藏/定制
role="search" 和 autocomplete="off" 必须同时存在，前者保无障碍，后者防浏览器自动填充干扰防抖逻辑——少一个，测试时都可能漏掉。 
