直接修改 datalist 的 innerHTML 无效，因为浏览器会缓存其子 option 元素，需用 DocumentFragment 创建新节点并一次性替换，确保 input 与 datalist 的 list/id 严格匹配且 DOM 已挂载。
为什么直接修改 datalist 的 innerHTML 无效？
因为浏览器在渲染时会缓存 datalist 的子 option 元素，后续直接操作 DOM（比如清空再重写）可能不触发输入框的自动补全刷新。尤其在 Chrome 中，即使 DOM 已更新，input[list="xxx"] 仍沿用旧的选项列表。
关键点：必须确保 option 元素是“新创建”的节点，且不能复用旧节点；同时要避免在异步回调中误操作了错误的 datalist ID。
- 不要用
innerHTML = ""后拼接字符串，容易 XSS 且触发不可靠 - 不要在 AJAX 成功回调里漏掉对
datalist的引用（比如用了全局变量但实际 DOM 已被替换） - 若
datalist是动态插入的，确保它在input渲染之后才挂载，否则绑定失效
如何用 fetch + DocumentFragment 安全更新 datalist
推荐用原生 fetch 获取 JSON 数据，然后用 DocumentFragment 批量生成 option 并一次性替换 —— 这样既避免反复 DOM 重排，又确保浏览器识别为全新列表。
假设后端返回格式为：[{"value":"apple"},{"value":"banana"}]，前端代码如下：
立即学习“前端免费学习笔记（深入）”；
const input = document.querySelector('input[list="fruits"]');
const datalist = document.getElementById('fruits');
function updateDatalist(data) {
const fragment = document.createDocumentFragment();
data.forEach(item => {
const opt = document.createElement('option');
opt.value = item.value;
fragment.appendChild(opt);
});
datalist.innerHTML = ''; // 清空旧节点（必须）
datalist.appendChild(fragment);
}
fetch('/api/suggestions')
.then(r => r.json())
.then(data => updateDatalist(data))
.catch(err => console.error('datalist 更新失败:', err));
注意：input 和 datalist 的 list 属性值必须严格一致（大小写、空格、连字符），否则关联断裂。
兼容性与移动端注意事项
datalist 在 iOS Safari 中支持度差（15.4+ 才完整支持），且部分安卓 WebView（如微信内置）根本不触发下拉建议。AJAX 更新后用户可能依然看不到候选框，这不是代码问题，而是平台限制。
- 不要依赖
datalist做必填校验或核心交互逻辑 - 如果业务强依赖搜索建议，建议降级为
autocomplete+ 自定义下拉菜单（如select或浮层div） - Chrome 桌面版对动态更新响应较快，但 Edge 旧版本需手动触发
input的focus()才能显示新选项
调试时怎么确认 datalist 真的生效了？
最直接的办法：在 DevTools 控制台执行 document.getElementById("xxx").children.length，对比 AJAX 前后数量是否变化；再手动聚焦 input 并敲击字母，观察下拉是否出现新值。
常见假象：
- Network 面板看到请求成功，但后端返回空数组或字段名写错（比如返回
text却读value） - DOM 中
datalist的id和input的list值不匹配（比如一个是fruits，另一个是fruit-list） - JS 执行时机早于
datalist节点挂载（尤其在 SPA 路由切换后未重新绑定）
真正起作用的从来不是“更新了 DOM”，而是“浏览器重新解析并关联了 input 和 datalist 的实时状态”。这点很容易被忽略。
