datalist 仅提供静态候选词，需 input 的 list 属性与 datalist 的 id 严格匹配才能触发下拉；option 的 value 是唯一匹配字段，label 不参与检索；不支持动态更新、异步、键盘导航及 IE 兼容。
datalist 能给 <input> 加上原生下拉联想，但不自动触发、不校验输入、不支持异步——它只是静态候选词的容器，用对了省事，用错了就显得像没生效。
为什么输入框点了没下拉？必须配对 name 和 list 属性
datalist 本身不绑定任何输入框，靠 input 的 list 属性指向 datalist 的 id 才能联动。常见错误是漏写 list，或大小写/拼写不一致。
-
<input list="browsers">必须对应<datalist id="browsers">（id和list值严格匹配） -
name属性无关，不影响联想功能，但提交表单时需要它传值 - Chrome / Edge 支持点击输入框右侧小箭头展开候选；Firefox 需要输入至少一个字符才显示匹配项
option 的 value 是唯一生效字段，label 不参与匹配
datalist 里的 <option> 只有 value 属性会被用于匹配和填充输入框，label 仅作显示文本，且不参与过滤逻辑。
<datalist id="os"> <option value="Windows"> <option value="macOS" label="Apple macOS"> <option value="Linux" label="Ubuntu LTS"> </datalist>
用户输入 “win” 会匹配到 Windows；输入 “apple” 不会匹配任何项，因为 label 不参与检索。
立即学习“前端免费学习笔记（深入）”；
不能动态更新？用 JavaScript 替换 innerHTML 或 options 集合
datalist 不响应数据变化，DOM 更新后需手动重置 input 的 list 关联（实际无需重置，但需确保 options 已刷新）。
- 推荐直接操作
datalist的options集合：document.getElementById('mylist').innerHTML = ''再 append 新<option> - 避免用
innerHTML +=，旧选项不会被清除，导致重复叠加 - 移动端 Safari 对动态更新支持不稳定，建议初始化时尽量预载常用项，高频变动场景改用
autocomplete库
真正麻烦的是兼容性边界：IE 完全不支持，Android WebView 表现参差，而且所有浏览器都不支持键盘上下键高亮候选——这得自己用 keydown + focus 模拟。别指望 datalist 替代完整 autocomplete 组件。
