关键在于input的list属性值必须严格匹配datalist的id，大小写、空格、下划线均不可错；option是唯一合法子元素且必须含value属性；匹配为区分大小写的前缀匹配，safari仅支持完全匹配。
如何让 <datalist></datalist> 和 <input> 正确关联
关键不是写对标签，而是 list 属性值必须严格匹配 <datalist></datalist> 的 id。大小写、空格、下划线都不能错，浏览器不会报错，但自动补全直接失效。
常见错误是：<input list="cityList"> 却写了 <datalist id="citylist"></datalist>（少了个大写 L），或者加了空格变成 id=" cityList "。
- 必须用
id，不能用name或其他属性 -
<datalist></datalist>可以放在页面任意位置，不一定要紧挨<input> - 多个
<input>可共用同一个<datalist></datalist>，只要list值一致
城市数据怎么塞进 <datalist></datalist> 才有效
<option></option> 是唯一合法子元素，且必须带 value 属性——文本内容只是显示用，真正提交或读取的值永远是 value 的内容。
比如用户输入“上海”，选中后 input.value 得到的是 "shanghai" 还是 "上海"，取决于你写的 value 值，不是 innerText。
<datalist id="cityList"><option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option></datalist>
- 不要用
<option></option>的label属性做城市名，它只影响下拉列表里的显示标签，不改变实际值 - 中文城市名直接写在
<option></option>里没问题，但后端接收时注意编码和空格 - 数据量大时别硬编码，用 JS 动态生成或通过 API 加载后插入
<datalist></datalist>
为什么输入“北”没弹出“北京”？兼容性与匹配逻辑
<datalist></datalist> 的匹配是**前缀匹配**，且**区分大小写**。输入 “bei” 不会匹配 value="beijing"，除非你输 “be”，而且浏览器只检查 value，不看显示文字。
Chrome 和 Edge 支持较好；Firefox 从 90+ 开始支持原生前缀匹配；Safari 一直只支持完全匹配（即必须输完整 value 才显示选项），这是最大坑点。
- 想支持 Safari，得自己用 JS 模拟下拉（比如监听
input事件 +filter()数据） - 移动端 iOS Safari 同样不支持模糊匹配，用户得手动打完才能看到提示
- 没有
onselect事件，要用input或change监听值变化
如何用 JS 补足原生 <datalist></datalist> 的短板
原生方案解决不了动态搜索、拼音首字母匹配、高亮关键词这些需求，得靠 JS 接管。核心思路：禁用原生 list，改用 contenteditable=false 模拟输入框 + <div> 渲染候选列表。
<p>但别一上来就重写整个组件——先判断是否需要增强：</p>
<ul>
<li>如果只要国内一二线城市（<datalist> 够用，重点调好 <code>value 和 ID 关联
Array.filter() + includes() 或正则setTimeout 控制频率真要动手，优先复用 dataset 或 JSON 数组，而不是反复操作 DOM 插入 <option></option>。
