list属性必须指向同页面存在的datalist的id；常见错误包括拼写错误、datalist位置不当、误用class/name代替id；option可无value属性，但value决定用户选中后输入框内容；原生datalist仅支持前缀匹配，不支持模糊搜索、高亮或键盘导航；ios safari几乎不显示提示，移动端需js方案兜底。
list 属性必须指向同页面存在的 datalist 的 id
不是任意字符串都能当 list 值用，它只接受一个有效的 id 引用。如果写成 list="suggestions"，但页面里没有 <datalist id="suggestions"></datalist>，那提示功能完全不会触发——浏览器连尝试都不尝试。
常见错误包括：
-
list值拼错，比如写成sugestions（少了个t） -
datalist放在input后面，且未加defer或 DOM 等待逻辑（虽然多数现代浏览器能回溯查找，但不保证） - 用了
class或name代替id，例如list="my-list-class"—— 这个值会被忽略
datalist 里的 option 不需要 value 属性也能生效
很多人以为每个 option 必须带 value，其实不然：datalist 中的 option 只要含文本内容（哪怕只是子节点文本），就能作为候选提示项。
以下两种写法效果一致：
<option value="Chrome"></option><option>Chrome</option>
但注意：value 属性决定的是用户最终输入的值——如果写了 value，用户选中后输入框填入的是 value；没写则填入标签内的文本。这在处理大小写、别名映射时很关键。
原生 datalist 不支持模糊匹配或搜索高亮
浏览器只做前缀匹配：用户输入 “c”，只会显示以 “c” 开头的选项（如 “Chrome”，但不会显示 “Firefox” 即使含 “c”）。它也不支持键盘上下键自动滚动、点击以外的交互，更没有高亮已输部分的功能。
这意味着：
- 不能靠它实现类似 VS Code 那种实时过滤+高亮
- 中文场景下，“北京”“北海”“北戴河”全输“北”才出来，但输“京”就什么都没有
- 想支持拼音首字母、简拼、甚至 typo 容错，必须用 JS 自行实现，
datalist只能当 fallback 或静态兜底
移动端兼容性差，尤其 iOS Safari 几乎不显示下拉提示
iOS Safari（直到 iOS 17）对 datalist 的支持仅限于“存在感”——input 的 list 属性被识别，但不渲染任何下拉面板。用户看不到提示，也无法用方向键选择。Android Chrome 表现尚可，但滚动和聚焦体验也远不如桌面。
所以如果你的应用核心用户是手机端，别依赖 datalist 做主要提示方案。真要兼顾，得用 autocomplete="off" 关掉原生提示，再上一套 JS 实现的下拉组件，并为 iOS 单独做 touch 事件适配。
真正起作用的永远是那个 id 对得上、option 写得对、且用户刚好在桌面 Chrome 里打开页面的瞬间——其他情况，都得靠自己补。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
