必须使用 input type="search" 以启用浏览器原生搜索功能，如清空按钮、专用软键盘和历史补全；name 应为 q，配合 form 的 action 和 submit 事件拦截实现健壮搜索体验。
必须用 input type="search"，别用 type="text"
浏览器对 type="search" 有原生支持：自动添加清空按钮、触发搜索专用软键盘（尤其 iOS/Safari）、启用历史记录下拉补全。换成 type="text" 就直接丢掉这些能力，还得自己写 JS 模拟，得不偿失。
常见错误是只图省事写 ，结果移动端用户点开键盘看不到“搜索”键，清空要手动全选删除，体验断层。
-
name属性建议固定为q——这是行业惯例，后端框架（如 Django、Express）默认识别该参数名 - 必须设
action，哪怕你后续用 JS 拦截提交，也要保留降级能力（比如 JS 失效时仍能跳转到/search?q=xxx） - 加
autofocus能让页面加载后光标自动落进框里，但注意不要在弹窗或非首屏区域滥用，否则会干扰滚动定位
表单提交拦截：监听 submit 事件，别监听 input 或 blur
想实现“回车就搜但不跳转”，核心是阻止表单默认行为，而不是监听输入变化。监听 input 会频繁触发、浪费资源；监听 blur 在移动端容易误判（比如键盘收起不算失焦），且不响应回车提交。
正确做法是给 绑定 submit 事件，调用 event.preventDefault()，再用 new FormData(form).get('q') 安全取值——它自动处理 URL 编码、空格、特殊字符，比直接读 input.value 更健壮。
- 如果用 AJAX 搜索，记得禁用提交按钮防止重复点击：
form.querySelector('button').disabled = true - 搜索完成后要恢复按钮状态，否则用户无法二次操作
- 别忘了给按钮加 loading 状态（比如文字变“搜索中…”），否则用户可能以为卡住而狂点
清空按钮样式改不了？直接隐藏，别硬调
各浏览器对清空按钮的伪元素支持不一致：::-webkit-search-cancel-button（Chrome/Safari）和 ::-ms-clear（旧 Edge）不能用常规 CSS 改颜色或大小，因为它们是 UA 控件，不是普通 DOM 元素。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
实操中建议统一隐藏，再用自定义图标覆盖：
- 隐藏原生按钮：
input::-webkit-search-cancel-button { -webkit-appearance: none; }+input::-ms-clear { display: none; } - Safari 15.4+ 对
appearance更严格，-webkit-appearance必须显式写上 - 若要自定义清空图标，需额外加一个
绝对定位覆盖，并用 JS 控制显隐和input.value = ''逻辑
搜索框不是孤立部件，得考虑上下文
一个真正可用的搜索框，从来不只是 HTML 标签堆砌。它要嵌入语义化结构、适配焦点流、兼容无障碍访问，还要预留 JS 扩展点。
- 外层
最好加上role="search"，屏幕阅读器能识别这是搜索区域 - 必须配
，哪怕视觉上隐藏，也保障可访问性 - 移动端聚焦时，
position: fixed的导航栏可能遮挡输入框，需要动态锁 body 高度或调整 viewport-fit - 如果做站内搜索（比如过滤本地页面列表），JS 过滤逻辑里一定要用
.trim().toLowerCase()再比对，否则空格和大小写会导致漏匹配
最常被忽略的是降级路径：JS 加载失败、网络中断、甚至用户禁用 JS 时，action 和 method="get" 仍要保证能跳转到结果页——这不是“备选方案”，而是搜索功能的基本底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
