浏览器显示搜索建议下拉仅取决于type="search"且autocomplete="on"（或未设为off），与form或role无关；Firefox默认禁用，Chrome/Safari默认启用，需兼容性处理。
input type="search" 的搜索建议行为到底靠什么触发
浏览器是否显示历史下拉建议，不取决于有没有 form 或 role="search"，而只看两个硬条件：type="search" + autocomplete="on"（或未显式设为 off）。autocomplete="search" 是可选增强，但不是必需项——它只是告诉浏览器“这个输入框专用于搜索”，部分引擎（如 Safari）会据此提升历史记录权重。
常见误区是以为加了 form 就自动有建议，其实 form 只负责提交逻辑；真正触发建议的是 input 自身的类型和 autocomplete 状态。Firefox 默认禁用该功能（即使 type 是 search），需手动开启设置或通过 JS 模拟；Chrome 和 Safari 则默认启用。
-
autocomplete="off"会彻底关闭所有建议（包括历史、书签、地址栏联想） -
autocomplete="search"在 Safari 中能优先展示搜索历史，在 Chrome 中效果接近on - 没有
name属性的input[type="search"]通常不会被浏览器记住历史（因为无标识符） - 建议始终配
name="q"或name="search"，这是服务端和分析工具识别搜索行为的通用约定
为什么有些浏览器不显示搜索建议下拉
不是 bug，是策略差异：Firefox 自 2025 年起默认关闭 input[type="search"] 的原生建议列表，理由是隐私优先；Chrome 和 Safari 则保持开启。这意味着你不能依赖“写了 type=search 就一定有下拉”——必须把建议能力当作可选增强，而非核心功能。
如果你需要跨浏览器一致的建议体验，就得自己实现（比如用 datalist 或 JS 渲染下拉），但注意：datalist 只支持静态选项，且不触发浏览器历史；JS 方案需处理键盘导航（↑↓Enter）、焦点管理、防抖和 AbortController 清理未完成请求。
立即学习“前端免费学习笔记（深入）”；
- Firefox 用户看到的是纯文本框，无 × 按钮、无下拉 —— 这是正常行为，不是样式没写对
- Safari iOS 上的建议来源更广：可能包含 Spotlight 搜索记录、Siri 建议、甚至第三方 App 注册的搜索入口
- Chrome 的建议列表会缓存近期提交过的完整 URL 查询字符串（如
/search?q=react+hooks），而不仅是关键词
如何让搜索建议既可用又不破坏语义
用原生 datalist 是最轻量、语义最干净的方式：它不干扰表单提交逻辑，不依赖 JS，且被屏幕阅读器识别为“可选建议列表”。但它只能提供固定候选词，无法动态加载。
如果必须动态建议（比如 API 返回关键词补全），就别试图覆盖原生行为——直接监听 input 事件，节流后发请求，用 div 渲染下拉面板，并手动管理 aria-activedescendant、role="listbox" 和键盘交互。这时候 input[type="search"] 仍是语义核心，只是建议层完全由你控制。
- 不要给
input加list属性却指向空datalist—— 这会让屏幕阅读器报“有建议但为空” - 动态建议面板必须用
position: absolute+top: 100%定位，否则影响表单流布局 - 移动端点击建议项时，要 focus 回 input 并 setSelectionRange()，否则软键盘可能意外收起
清空按钮（×）和搜索建议是两套独立机制
很多人以为清空按钮消失意味着建议也失效，其实它们底层互不依赖：::-webkit-search-cancel-button 是 WebKit 专属伪元素，只控制 × 按钮；而建议列表由 autocomplete 策略和浏览器历史服务驱动。Firefox 不显示 × 按钮，但只要开了 autocomplete，仍可能在地址栏联动显示建议。
如果你重置了 -webkit-appearance 却忘了恢复 ::-webkit-search-cancel-button 样式，× 按钮就没了；但建议列表不受影响。反过来，禁用 autocomplete 后，× 按钮还在（只要 type 是 search），但下拉建议肯定消失。
- 强制显示 × 按钮的 CSS 必须包含：
appearance: textfield;+::-webkit-search-cancel-button { appearance: none; } - 在非 WebKit 浏览器中，清空功能只能靠 JS 实现（监听 input + 按钮 click）
- 建议列表的 aria-label 应该描述内容类型，比如
aria-label="搜索关键词建议"，而不是“下拉菜单”
form + input[type="search"] + label）才是不可妥协的底线。 
