autocomplete="off"是唯一能禁用浏览器搜索历史干扰datalist的原生方式，必须写在input标签上；清空datalist需逐个移除子节点而非innerhtml=""；移动端须自实现下拉浮层。
为什么 autocomplete="off" 是必须加的
浏览器自带的搜索历史建议会和 datalist 混在一起显示，尤其在 Chrome 中——哪怕你只写了 <input list="history">，它也会把地址栏/搜索引擎的历史词塞进下拉框，盖过你 JS 动态写进去的词。这不是 bug，是浏览器默认行为。
加 autocomplete="off" 是唯一能关掉这个干扰的原生方式。别信 autocomplete="false" 或 autocomplete="nope"，只有 "off" 被所有主流浏览器识别。
- 必须写在
<input>标签上，写在<form></form>上无效 - 某些旧版 Safari 对
autocomplete="off"响应不一致，此时得靠 JS 临时清空input.value并 blur/focus 强制重置（但仅作 fallback） - 如果用了框架（如 Vue），别用 v-model 绑定后又手动改 value，容易触发双向同步冲突
清除 datalist 时为什么不能只 innerHTML = ''
在旧版 Safari（iOS 15 及更早）中，对 <datalist></datalist> 直接赋值 innerHTML = '' 会导致它和 input 的绑定关系断裂——之后再往里塞 <option></option>，下拉框也不显示了。
安全写法是逐个移除子节点：
const dl = document.getElementById('history-list');
while (dl.firstChild) {
dl.removeChild(dl.firstChild);
}
- 别用
textContent = ''，它会把整个<datalist></datalist>当成文本清空，破坏 DOM 结构 - 清空后建议立刻调用
input.focus()（如果输入框还聚焦着），避免 Safari 失去下拉触发状态 - 如果用的是现代浏览器（Chrome ≥ 110、Safari ≥ 16.4），
innerHTML = ''是 OK 的，但统一用 while 循环更省心
localStorage 清空后 UI 不更新？检查这三处
点了“清空历史”按钮，localStorage.removeItem('searchHistory') 执行了，但 <datalist></datalist> 还残留旧选项，或者页面上的 <ul id="search-history"></ul> 没变——问题通常不在存储逻辑本身。
-
document.getElementById('history-list').innerHTML没重新赋值：清空 storage 后必须手动刷新 datalist 内容，不能指望它自动同步 - JS 执行时机错：按钮事件监听器绑在 DOM 加载前，
getElementById返回 null；确保脚本在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
