datalist 下拉仅在 input 的 list 属性与 datalist 的 id 完全匹配且 type 为 text/search/email 等文本类时生效；autocomplete="off" 会禁用下拉；ios safari 不渲染该下拉面板。
list 属性必须匹配 datalist 的 id 才能生效
只写 <input list="cities"> 是没用的，浏览器压根不会渲染下拉面板。关键在于：页面里必须存在一个 <datalist id="cities"></datalist>，且 id 值与 list 属性值**完全一致（区分大小写、无空格、无#前缀）**。
常见错误包括：
-
list="city-list"但<datalist id="cities"></datalist>—— 拼写不一致 -
<datalist class="cities"></datalist>误用 class 替代 id —— 浏览器只认 id -
<datalist id="cities" style="display:none"></datalist>—— 虽然datalist本就不显示，但某些样式干扰可能导致选项不出现
input type 必须是 text/search/email 等文本类类型
list 属性对 type="checkbox"、type="radio"、type="password"、type="file" 等完全无效，浏览器会静默忽略。只有以下类型支持：
-
text（最稳妥，兼容所有<option></option>内容） -
search（行为同text，仅语义和默认样式差异） -
email、url、tel、number（注意：number选中非数字value会导致输入框变为空字符串）
别试图用 list 绑定 select —— 它不是替代方案，不提供必选、分组、键盘导航等能力。
autocomplete="off" 会直接禁用 list 下拉
这是规范行为，不是 bug。只要 input 上写了 autocomplete="off"，哪怕 datalist 结构完全正确，Chrome、Firefox、Edge 都不会弹出建议面板。
解决办法只有两个：
- 移除
autocomplete属性（推荐） - 显式设为
autocomplete="on"
如果业务真要防密码管理器填充（比如登录页的用户名字段），不要硬扛 autocomplete="off" + list，该用 JS 自定义下拉就用 JS。
iOS Safari 不显示 datalist 下拉面板
截至 iOS 17，Safari 解析 list 属性，但**不渲染下拉菜单**，用户看不到你写的任何 <option></option>。它只可能在键盘上方显示系统词典里的模糊匹配词（跟你定义的 datalist 无关）。
这意味着：如果你的用户大量使用 iPhone，这个功能在移动端基本形同虚设。别花时间调样式或埋点验证“为什么 iOS 不触发”，这是 WebKit 的实现限制，无法通过 HTML/CSS 规避。
真正容易被忽略的是：这个限制不是“偶尔失效”，而是“稳定不显示”——你得提前决定是否值得为桌面端单独保留这套逻辑，还是统一降级为 JS 实现的可控下拉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
