根本原因是input的list属性值与datalist的id未严格匹配（区分大小写、空格、拼写），或浏览器不支持（如旧版Safari）；datalist仅在用户手动输入时触发前缀匹配，且只认option的value属性，无value则无效。
为什么 datalist 有时完全不显示建议？
根本原因通常是 input 的 list 属性值和 datalist 的 id 不匹配，或浏览器不支持（IE10+、Edge、Chrome、Firefox 都支持，但 Safari 对部分属性支持较弱）。datalist 不是“下拉菜单”，它只提供提示，用户必须手动输入触发——没输入任何字符时，不会弹出选项。
实操建议：
- 确保
input的list属性值与datalist的id完全一致（区分大小写） - 不要给
datalist加display: none或visibility: hidden，它本就不渲染可见元素 - Safari 中若用
type="number"或type="email"，datalist可能被忽略；优先用type="text"或type="search" -
option标签必须直接在datalist内，不能嵌套在optgroup或其他容器里
datalist 的 option 值怎么写才有效？
datalist 只认 option 的 value 属性——内容文本（即 <option>北京</option> 中的 “北京”）会被忽略，除非显式写出 value。这是最常踩的坑：看着 HTML 有文字，但补全就是不出来。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
<input list="cities" placeholder="输入城市"> <datalist id="cities"> <option value="北京"> <option value="上海"> <option value="广州"> <option value="深圳"> </datalist>
错误写法（以下均无效）：
-
<option>北京</option>（没value，补全不生效） -
<option value="">北京</option>（value为空字符串） -
<option data-value="北京"></option>（自定义属性不被识别）
如何让补全更贴近用户输入（比如模糊匹配）？
datalist 原生只支持前缀匹配（即输入 “北”，只匹配 “北京”；输 “京” 就不匹配）。它没有内置模糊搜索、拼音首字母、高亮等功能。
如果需要更强匹配能力，必须用 JavaScript 替代方案，例如：
- 监听
input事件，过滤option列表并动态重写datalist内容（注意：部分浏览器不支持运行时更新datalist，兼容性差） - 放弃
datalist，改用autocomplete="off"+ 自定义div下拉 +filter()逻辑（推荐用于生产环境） - 使用成熟库如
awesomplete或select2（但需权衡体积和依赖）
原生 datalist 的价值在于零 JS、语义化、无障碍支持好——别强求它做它做不到的事。
移动端键盘为什么没出现候选词？
Android Chrome 和 iOS Safari 对 datalist 的支持策略不同：Safari 几乎不触发键盘候选栏；Chrome 可能在某些输入法下显示，但不可控。这不是 bug，而是平台级限制。
关键事实：
- 移动端没有“鼠标悬停”概念，用户只能靠输入触发，且触发时机更迟滞
- 软键盘是否展示候选区，取决于系统输入法 + 浏览器组合，开发者无法干预
- 若需确定性体验（如地址/商品搜索），必须用 JS 实现浮层 suggestion
所以，别在移动端依赖 datalist 做核心交互路径——它只是锦上添花，不是功能支柱。
