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