datalist 不能自动记录用户搜索历史，需用 js 手动维护词列表并动态更新 option；注意去重、清空重写、兼容性及性能限制。
为什么 datalist 不能直接记录用户历史搜索？
datalist 本身是静态的，只负责展示预设选项，浏览器不会自动把用户输过的词存进去。你看到的“历史热词推荐”，其实是靠 JS 手动维护一个词列表，再动态写入 datalist 的 option 里。如果只写个空 datalist 加个 list 属性，搜完就没了——这不是 bug，是设计如此。
如何用 JS 把搜索词追加进 datalist 并去重？
关键不是“添加”，而是“更新”：每次搜索后，读取已有 option 的 value，合并新词，去重，再清空重写。别用 append() 累加，否则重复词越积越多。
- 监听
input或submit事件，拿到searchInput.value.trim() - 用
Array.from(datalist.querySelectorAll('option')).map(el => el.value)提取当前所有词 - 用
[...new Set([...existing, newWord])]去重（注意空字符串过滤） - 清空
datalist.innerHTML = ''，再循环生成新option插入
datalist 在 Chrome 和 Safari 中的行为差异
Chrome 支持输入时下拉匹配、方向键选择、回车确认；Safari（尤其 iOS）对 datalist 支持弱，不触发 input 事件、不响应键盘选择，甚至可能完全不显示下拉项。别依赖它做核心交互，把它当辅助提示更稳妥。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 必须配
autocomplete="off"防止浏览器自身搜索历史干扰 - 移动端建议 fallback 到自定义下拉菜单（比如用
div+position: absolute） -
option的value必须是纯字符串，不能含 HTML 或空格开头/结尾（会截断或失效）
性能和存储边界要注意什么？
本地存太多词会导致 datalist 渲染变慢，尤其超过 50 条后，输入时下拉卡顿明显。localStorage 也别无脑全存——用户搜“a”“aa”“aaa”这种无效词，得过滤。
- 限制最大条目数（比如 20 条），新词入列时
shift()老词 - 过滤长度
- 用
localStorage.setItem('searchHistory', JSON.stringify(list))持久化，但记得try/catch防止 quota exceeded - 首次加载页面时从 storage 读取并初始化
datalist，别等第一次搜索才建
真正难的不是写几行 JS，而是判断哪些词该留、什么时候该删、以及在 Safari 里怎么悄悄降级——这些逻辑没写进文档，但用户一试就知道有没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
