必须用input的list属性严格匹配datalist的id（区分大小写），datalist需在DOM中存在且含value有效的option；仅text等指定type生效，移动端兼容性差。
如何让 input 正确绑定 datalist
必须用 input 的 list 属性指向 datalist 的 id，二者值严格匹配（区分大小写），且 datalist 必须在 DOM 中存在——不一定要在 input 后面，但不能是动态插入后未触发重渲染的孤立节点。
常见错误现象：input 有下拉箭头但点不开、输入时无建议、控制台无报错但功能失效。
-
list值写成name或class——只认id -
datalist缺少id，或id拼错（比如多空格、下划线误为短横） - 把
datalist放在template或shadow DOM里，而主文档无法访问
datalist 里的 option 值怎么写才有效
option 的 value 属性决定建议文本内容；text 节点（即标签内文字）会被忽略，仅 value 参与匹配和填充。用户选中后，input 的值会设为该 value，不是 innerText。
使用场景：搜索框补全、固定选项输入（如国家、浏览器版本）、避免拼写误差。
- 支持重复
value，但建议去重，否则下拉出现相同项 -
value可含空格、符号、中文，无特殊转义要求 - 不支持
option的disabled属性——禁用项仍会显示并可选
<input list="browsers"><datalist id="browsers"><option value="Chrome">谷歌浏览器</option> <option value="Firefox">火狐</option></datalist>
为什么输入时没触发建议？检查这三点
datalist 不是自动监听输入事件的组件，它只响应原生输入行为（键盘输入、粘贴、聚焦后手动点击下拉箭头）。任何通过 JS 直接修改 input.value 的操作，都不会激活建议列表。
- 用
input.value = 'xxx'赋值后，不会弹出下拉；需用户主动触发输入（哪怕只按一个键） - 移动端 Safari 对
datalist支持弱：iOS 15.4+ 才完整支持，旧版可能只显示空白下拉或完全不显示 - 若
input设了type="number"或type="email"，部分浏览器会禁用datalist（Chrome 允许，Firefox 不允许）——推荐统一用type="text"+ 前端校验
兼容性与替代方案的现实取舍
IE 完全不支持 datalist，Edge 12–18 支持但有样式 bug（下拉宽度异常），现代 Chrome/Firefox/Edge（Chromium）基本可用。但它不是“可控下拉”，无法监听选择事件、无法自定义样式、无法禁用某项。
真正需要交互控制（比如点击建议后发请求、高亮关键词、分组）时，datalist 就不够用了——得换 autocomplete 库或手写 div + keydown + focusout 逻辑。
容易被忽略的一点：datalist 的匹配是**前缀匹配且不区分大小写**，但不支持模糊匹配（比如输 “hrome” 匹不出 “Chrome”），这点和多数 JS 补全库不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
