关键在input的list属性与datalist的id严格匹配，仅支持前缀匹配且大小写不敏感；datalist只接受纯option子元素，移动端兼容性差，需JS降级。

如何让 <input> 关联 <datalist> 并正常显示候选项

关键在 list 属性和 id 匹配，不是 name 或 for。浏览器只认 <input list="xxx"> 和 <datalist id="xxx"> 的 id 严格一致。

常见错误：把 list 写成 list="my-datalist"，但 <datalist> 的 id 是 data-list —— 少一个字符就完全不触发下拉。

• <input list="cities"> 必须对应 <datalist id="cities">
• 不要加空格、大小写混用或特殊符号，id 值区分大小写
• <datalist> 可以放在文档任意位置（不必紧邻 <input>），只要 id 可访问即可

<option> 在 <datalist> 中的写法限制

<datalist> 只接受 <option> 子元素，且 <option> 不能嵌套，也不能带 value 和文本内容以外的属性（比如 disabled 会被忽略）。

有效写法只有两种：

立即学习“前端免费学习笔记（深入）”；

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• <option value="Beijing">（无闭合标签，纯属性值）
• <option value="Shanghai">上海</option>（有文本内容，但仅用于显示，不影响提交值）

无效写法：<option value="Guangzhou" disabled>（disabled 不起作用）、<option><span>Shenzhen</span></option>（含 HTML 标签会直接被忽略）

用户输入时匹配逻辑与大小写敏感性

浏览器默认按「前缀匹配」且「大小写不敏感」—— 输入 ny 会匹配 New York，但不会匹配 Bayonne（因为不是开头）。

• 无法控制匹配方式（如改成包含匹配、模糊匹配），这是原生行为，不可配置
• 如果想支持中文拼音首字母（如输“bj”出“北京”），得自己用 JS 拦截 + 自定义下拉，<datalist> 做不到
• 所有匹配基于 <option value> 的值，不是显示文本；若写了 <option value="BJ">北京</option>，输入“北京”不会触发匹配

兼容性与移动端注意事项

桌面 Chrome / Edge / Firefox 支持良好，但 Safari（尤其旧版）对 <datalist> 的样式控制极弱，且不支持键盘上下键高亮选项；iOS Safari 则基本不显示下拉列表（仅在部分版本中输入时弹出简短候选条）。

• 不要依赖 <datalist> 实现核心功能，它只是增强体验的“锦上添花”
• 移动端建议搭配 autocomplete="off" 防止系统键盘自动补全干扰（两者机制冲突）
• 若需统一交互逻辑，必须用 JS + <div> 下拉模拟，<datalist> 仅作降级 fallback

真正难的是跨端一致性 —— 看似一行 list 属性就能搞定，实际要覆盖 Safari 和 iOS 的静默失效，就得准备两套逻辑。