autocomplete="off"是唯一能禁用浏览器搜索历史干扰datalist的原生方式，必须写在input标签上；清空datalist需逐个移除子节点而非innerHTML=""；移动端须自实现下拉浮层。
为什么 autocomplete="off" 是必须加的
浏览器自带的搜索历史建议会和 datalist 混在一起显示，尤其在 Chrome 中——哪怕你只写了 <input list="history">，它也会把地址栏/搜索引擎的历史词塞进下拉框，盖过你 JS 动态写进去的词。这不是 bug，是浏览器默认行为。
加 autocomplete="off" 是唯一能关掉这个干扰的原生方式。别信 autocomplete="false" 或 autocomplete="nope"，只有 "off" 被所有主流浏览器识别。
- 必须写在
<input>标签上，写在<form>上无效 - 某些旧版 Safari 对
autocomplete="off"响应不一致，此时得靠 JS 临时清空input.value并 blur/focus 强制重置（但仅作 fallback） - 如果用了框架（如 Vue），别用 v-model 绑定后又手动改 value，容易触发双向同步冲突
清除 datalist 时为什么不能只 innerHTML = ''
在旧版 Safari（iOS 15 及更早）中，对 <datalist> 直接赋值 innerHTML = '' 会导致它和 input 的绑定关系断裂——之后再往里塞 <option>，下拉框也不显示了。
安全写法是逐个移除子节点：
立即学习“前端免费学习笔记（深入）”；
const dl = document.getElementById('history-list');
while (dl.firstChild) {
dl.removeChild(dl.firstChild);
}
- 别用
textContent = ''，它会把整个<datalist>当成文本清空，破坏 DOM 结构 - 清空后建议立刻调用
input.focus()（如果输入框还聚焦着），避免 Safari 失去下拉触发状态 - 如果用的是现代浏览器（Chrome ≥ 110、Safari ≥ 16.4），
innerHTML = ''是 OK 的，但统一用 while 循环更省心
localStorage 清空后 UI 不更新？检查这三处
点了“清空历史”按钮，localStorage.removeItem('searchHistory') 执行了，但 <datalist> 还残留旧选项，或者页面上的 <ul id="search-history"> 没变——问题通常不在存储逻辑本身。
-
document.getElementById('history-list').innerHTML没重新赋值：清空 storage 后必须手动刷新 datalist 内容，不能指望它自动同步 - JS 执行时机错：按钮事件监听器绑在 DOM 加载前，
getElementById返回 null；确保脚本在</body>前，或用DOMContentLoaded包一层 - UI 更新被节流覆盖：如果同时用了防抖（debounce）加载历史，清空操作要调用
clearTimeout取消挂起的渲染任务，否则旧数据可能“迟到”出现
移动端 fallback 到自定义下拉菜单的硬性理由
iOS Safari 对 datalist 的支持至今没达标：不响应键盘方向键、不触发 input 事件、点击选项不填入 input、甚至完全不显示下拉项。这不是兼容性补丁能解决的，是底层限制。
真正在移动端做“历史热词推荐”，得自己实现一个 <div class="suggestions"> 浮层：
- 用
position: absolute定位，top/bottom 根据输入框位置动态计算 - 选项点击后，手动设置
input.value并触发input和change事件，保证表单逻辑连贯 - 不要复用
<datalist>的 DOM，它在 iOS 上就是个摆设；把它当纯服务端配置项，只在桌面端启用
最易被忽略的点：用户在移动端习惯双击清空输入框，这时你要监听 input 的 event.target.value === '' 状态，主动隐藏自定义下拉浮层——不然它会悬在那儿不动。
