datalist 仅提供输入建议而非自动补全，不强制选择、不过滤选项；常见失效原因是 list 属性与 datalist 的 id 不匹配；必须为兄弟元素，不可嵌套；仅推荐用于 type="text"；option 只认 value；动态更新只需 DOM 中存在 option 元素即可实时生效。
datalist 不是“自动补全”，它只是提供输入建议；浏览器不会强制用户选中列表项，也不会过滤选项——这是最容易误解的地方。
为什么
常见原因是 list 属性值和 的 id 不匹配，大小写、空格、引号都必须完全一致。注意：list 是属性名，不是标签名；datalist 本身没有 name 或 value，只靠 id 关联。
- 检查控制台是否报错
Failed to execute 'appendChild' on 'Node': This node type is not supported——说明你把错误地塞进了内部（HTML 规范禁止） -
必须是的兄弟元素，不能嵌套 - 某些浏览器（如 Safari 15.4 之前）对
type="number"或type="date"的datalist支持极差，建议只用于type="text"或省略type
value 还是 label？
在 datalist 中只认 value，label 属性会被忽略。用户点击或回车选中后，填入输入框的是 value 的值，不是显示文本。
<input list="browsers"><datalist id="browsers"><option value="Chrome">Google Chrome</option> <option value="Firefox">Mozilla Firefox</option></datalist>
上面例子中，“Google Chrome” 和 “Mozilla Firefox” 只是视觉提示，真正提交/读取的值是 "Chrome" 和 "Firefox"。如果想让显示文本和提交值一致，就别写多余文字：。
怎么让 datalist 动态更新？
原生 datalist 不监听数据变化，DOM 更新后需手动触发重渲染——但其实不用“重渲染”，只要确保 元素已存在于 DOM 中，输入时浏览器就会实时匹配。关键在 JS 操作时机：
- 用
innerHTML替换整个datalist内容后，无需额外操作，下一次输入焦点进入就会生效 - 用
append()或appendChild()新增，也立刻可用 - 不要在
input事件里高频清空 + 重写datalist，这会导致建议列表闪烁或延迟；建议加防抖，且只更新子节点 - 不支持正则匹配或模糊搜索，所有匹配都是浏览器内置的前缀匹配（从开头字符开始比对）
真正麻烦的是兼容性：IE 完全不支持，旧版 Edge 行为不稳定，移动端软键盘可能压根不显示建议栏。如果业务要求强可控的下拉建议，datalist 只能当降级方案，别把它当核心交互依赖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
