关键在input的list属性与datalist的id严格匹配，仅支持前缀匹配且大小写不敏感；datalist只接受纯option子元素，移动端兼容性差，需js降级。
如何让 <input> 关联 <datalist></datalist> 并正常显示候选项
关键在 list 属性和 id 匹配，不是 name 或 for。浏览器只认 <input list="xxx"> 和 <datalist id="xxx"></datalist> 的 id 严格一致。
常见错误：把 list 写成 list="my-datalist"，但 <datalist></datalist> 的 id 是 data-list —— 少一个字符就完全不触发下拉。
-
<input list="cities">必须对应<datalist id="cities"></datalist> - 不要加空格、大小写混用或特殊符号，
id值区分大小写 -
<datalist></datalist>可以放在文档任意位置（不必紧邻<input>），只要id可访问即可
<option></option> 在 <datalist></datalist> 中的写法限制
<datalist></datalist> 只接受 <option></option> 子元素，且 <option></option> 不能嵌套，也不能带 value 和文本内容以外的属性（比如 disabled 会被忽略）。
有效写法只有两种：
-
<option value="Beijing"></option>（无闭合标签，纯属性值） -
<option value="Shanghai">上海</option>（有文本内容，但仅用于显示，不影响提交值）
无效写法：<option value="Guangzhou" disabled></option>（disabled 不起作用）、<option><span>Shenzhen</span></option>（含 HTML 标签会直接被忽略）
用户输入时匹配逻辑与大小写敏感性
浏览器默认按「前缀匹配」且「大小写不敏感」—— 输入 ny 会匹配 New York，但不会匹配 Bayonne（因为不是开头）。
- 无法控制匹配方式（如改成包含匹配、模糊匹配），这是原生行为，不可配置
- 如果想支持中文拼音首字母（如输“bj”出“北京”），得自己用 JS 拦截 + 自定义下拉，
<datalist></datalist>做不到 - 所有匹配基于
<option value></option>的值，不是显示文本；若写了<option value="BJ">北京</option>，输入“北京”不会触发匹配
兼容性与移动端注意事项
桌面 Chrome / Edge / Firefox 支持良好，但 Safari（尤其旧版）对 <datalist></datalist> 的样式控制极弱，且不支持键盘上下键高亮选项；iOS Safari 则基本不显示下拉列表（仅在部分版本中输入时弹出简短候选条）。
- 不要依赖
<datalist></datalist>实现核心功能，它只是增强体验的“锦上添花” - 移动端建议搭配
autocomplete="off"防止系统键盘自动补全干扰（两者机制冲突） - 若需统一交互逻辑，必须用 JS +
<div> 下拉模拟，<code><datalist></datalist>仅作降级 fallback真正难的是跨端一致性 —— 看似一行
list属性就能搞定，实际要覆盖 Safari 和 iOS 的静默失效，就得准备两套逻辑。
