需用localStorage手动存储搜索词并动态更新datalist：提交时去重存入数组（unshift到开头）、截取前10条、解析后逐个生成option插入；input[list]必须与datalist id严格匹配，且仅支持开头匹配。
如何让 datalist 显示用户之前搜过的关键词
datalist 本身不保存历史，它只是个静态选项池。想让它显示“历史搜索记录”，必须手动把用户搜过的内容存起来（比如用 localStorage），再动态塞进 option 里。浏览器不会自动帮你做这事，写了 <datalist id="history"></datalist> 但没往里加 <option>，就永远看不到下拉建议。
怎么把搜索词存进 localStorage 并实时更新 datalist
关键不是绑定 oninput 或 onchange，而是得在用户真正提交（比如按回车或点搜索按钮）后才存——否则输错字、删掉重打，也会被当成一条“历史”。
- 用
localStorage.getItem("searchHistory")读出 JSON 字符串，JSON.parse()转成数组；如果为空，初始化为空数组 - 每次提交前，先检查当前输入值是否非空、且不在已有数组里，再用
unshift()插到开头（保持最新在前） - 截取前 10 条（避免
datalist过长卡顿），再JSON.stringify()存回去 - 清空
datalist内容，遍历数组生成<option value="xxx">并append()进去
示例片段：
const input = document.getElementById('search');
const list = document.getElementById('history');
const history = JSON.parse(localStorage.getItem('searchHistory') || '[]');
function updateDatalist() {
list.innerHTML = '';
history.slice(0, 10).forEach(term => {
const opt = document.createElement('option');
opt.value = term;
list.appendChild(opt);
});
}
document.getElementById('search-form').addEventListener('submit', e => {
e.preventDefault();
const val = input.value.trim();
if (!val) return;
const idx = history.indexOf(val);
if (idx > -1) history.splice(idx, 1);
history.unshift(val);
localStorage.setItem('searchHistory', JSON.stringify(history.slice(0, 10)));
updateDatalist();
input.value = ''; // 提交后清空输入框，避免重复触发
});
为什么 input[list] 绑定后还是没下拉？常见漏掉的三件事
哪怕 datalist 里有 option，也可能完全不弹出——这不是 bug，是浏览器对匹配逻辑的严格限制。
立即学习“前端免费学习笔记（深入）”；
-
input必须有list属性，且值要和datalist的id完全一致（大小写敏感、不能多空格） -
input类型不能是type="hidden"、type="checkbox"等不支持文本输入的类型；推荐用type="text"或type="search" - 用户输入内容必须“开头匹配”
option.value—— 输入py能匹配python，但输thon就不会出现
移动端兼容性和体验陷阱
iOS Safari 对 datalist 支持很弱：下拉菜单常不显示，或点击选项后不填充输入框。Android Chrome 基本可用，但长按输入框唤出键盘时，datalist 建议可能延迟半秒才出来。
- 别依赖
datalist做核心功能，它只是增强提示；关键逻辑（如搜索跳转）必须靠表单提交或 JS 触发 - 如果历史记录超过 20 条，iOS 下滚动会卡顿，建议硬性限制在 15 条以内
- 用户清空
localStorage后，历史就彻底消失——没有服务端同步的话，换设备就归零
真正麻烦的不是写几行 JS，而是得同时处理存储去重、DOM 同步、输入时机判断、以及移动端那套不可靠的原生行为。稍不注意，用户就会觉得“刚搜过的词怎么没出现在下面”。
