<details>标签不适合直接实现动态搜索建议列表，因其缺乏实时响应、键盘导航、聚焦管理和ARIA支持等关键能力；仅适合作为静态搜索帮助、预设模板或结果元信息的折叠容器。
details 标签不适合直接用于实现动态搜索建议列表，它不是为实时、高频更新的交互场景设计的。它的核心定位是静态或半静态的“可选细节披露”，而非响应式下拉提示。但在特定边界条件下，可辅助构建轻量级、语义清晰的搜索辅助结构。
为什么不能直接替代 autocomplete 下拉框
搜索建议列表需要满足几个关键特性：实时输入响应、键盘导航（上下键）、聚焦管理、动态内容注入、无障碍 ARIA 支持（如 aria-expanded、aria-activedescendant）。而 <details>：
- 不监听 input 或 keydown 事件，无法自动根据用户输入过滤并渲染新建议
- 点击
<summary>才触发展开，无法做到“输入即显”或“失焦即收” - 原生不支持键盘方向键操作建议项，仅支持空格/回车切换 open 状态
- 内容区域不可聚焦，无法让屏幕阅读器按顺序播报每条建议
适合搭配使用的辅助场景
当搜索逻辑本身已由 JS 实现，<details> 可作为“高级搜索入口”或“搜索说明折叠区”，提升表单语义与可访问性：
-
收起式搜索帮助：在搜索框旁放置
<details><summary>怎么搜索？</summary><p>支持“作者:张三”、“类型:教程”等语法</p></details></li> <li><strong>预设搜索模板</strong>：用 <code><details open><summary>常用筛选</summary><ul><li><a href="?q=前端&tag=vue">Vue 相关</a></li></ul></details>
提供静态快捷入口 -
搜索结果元信息折叠：在搜索结果页顶部，用
<details><summary>本次搜索共 247 条结果（含 12 条广告）</summary><p>时间范围：2024–2026｜数据来源：主库+扩展索引</p></details>
若强行用于建议列表需补足的关键点
极少数简化场景（如固定词库、无实时输入需求）中，可用 <details> 模拟，但必须额外处理：
- 用 JavaScript 监听
input事件，手动更新<details>内部<ul>的<li>列表 - 为
<summary>添加role="combobox"和aria-haspopup="listbox"，并同步控制aria-expanded - 将建议项包裹进
<div role="listbox">，每项设role="option"并管理焦点 - 禁用原生 toggle 行为（如
event.preventDefault()），改由 JS 控制 open 状态
更推荐的替代方案
真正需要搜索建议时，应优先采用语义化更强、行为可控的标准组合：
- 使用
<input list>+<datalist>（适用于有限、静态候选词） - 构建自定义
<div role="combobox">，配合<ul role="listbox">和完整 ARIA 属性 - 借助成熟 UI 库（如 Headless UI、Downshift）封装可访问的 autocomplete 组件
