原生 input 无动态搜索建议能力，需 javascript 实现；datalist 仅支持静态开头匹配，且依赖 name 属性和 autocomplete="search"（非 "off"）才能触发浏览器历史建议，firefox 自 2025 年默认禁用，safari/chrome 仅支持本地 url 历史。
原生 input 没有动态搜索建议能力，必须靠 JavaScript 实现；datalist 只能提供静态选项，且受 autocomplete 值严格限制——别指望写个 type="search" 就自动弹出历史词。
为什么 type="search" 不等于有建议下拉
浏览器是否显示原生建议，只取决于两个硬条件：type="search" + autocomplete 值不是 "off"（即设为 "on"、"search" 或不设）。但 Firefox 自 2025 年起默认禁用该功能，Safari 和 Chrome 虽启用，却只展示本地历史（URL 查询串），无法对接 API。更关键的是：没有 name 属性的 input，浏览器根本不会记录输入历史。
-
autocomplete="off"会同时禁用历史下拉和datalist建议（Blink 内核明确行为） -
autocomplete="search"是推荐值：它不关建议，还能让 Safari 优先展示搜索历史 - 清空按钮、软键盘“搜索”键、移动端优化等特性，都依赖
input在合法form内且带name
用 datalist 实现轻量静态建议（无 JS）
这是唯一不依赖脚本的方案，但仅适合固定小词表（建议 ≤ 200 条），且浏览器只匹配输入开头，不支持异步或模糊搜索。
-
input的list属性值必须与datalist的id完全一致（区分大小写） - 每个建议只能用
<option value="xxx"></option>，不能加text或label - 避免写
autocomplete="off"—— 改用autocomplete="search"才能保留建议 - 示例结构：
<input type="text" list="terms" name="q" autocomplete="search" placeholder="搜技术名词"><datalist id="terms"><option value="HTML"></option> <option value="CSS"></option> <option value="JavaScript"></option></datalist>
监听 input 事件实现动态建议（必选方案）
真要对接后端 API 或做实时过滤，必须监听 input 事件（不是 keyup 或 change），并手动控制请求、渲染和键盘导航。
- 绑定
addEventListener('input', handler)，覆盖粘贴、语音输入、IME 等所有变更场景 - 必须加防抖：用
setTimeout+clearTimeout延迟 250–300ms，避免每敲一个字就查一次 - 每次新输入前，用
AbortController中止上一次未完成的fetch，防止旧响应覆盖新结果 - 渲染建议列表时，先清空容器，只在有结果时显示；空结果时隐藏容器，避免占位留白
- 键盘导航（↑↓Enter）需手动实现：监听
keydown，维护当前高亮索引，Enter时填充输入框并提交
容易被忽略的细节
很多人卡在看似无关的地方：比如表格内搜索时用 row.textContent.includes() 导致误匹配表头或脚本内容；或给 input 加了 required 却忘了它只校验非空，对建议列表毫无影响；还有人试图用 visibility: hidden 隐藏建议项，结果屏幕阅读器仍会读出全部内容。真正可靠的建议体验，永远建立在明确的数据边界（指定列/字段）、可预测的交互反馈（键盘焦点管理）和及时的资源清理（AbortController）之上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
