datalist 联动需 list 属性与同文档 datalist 的 id 严格匹配（区分大小写、无空格），仅 option 的 value 参与匹配，IE 不支持，选中不触发 change 事件，服务端须校验。
list 属性必须指向同页面存在的 datalist id
浏览器只认 list 属性值和 datalist 的 id 完全匹配，且二者必须在同一个 HTML 文档内（不支持跨 iframe 或外部文件）。常见错误是拼写不一致，比如 input list="suggestions" 对应的却是 <datalist id="suggestion"></datalist> —— 少了个 s 就完全失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查
input的list值和datalist的id是否严格一致（区分大小写） - 避免用动态生成的 ID 但未同步更新
list属性值（例如 JS 创建datalist后忘了设input.list = "xxx"） -
datalist可以放在文档任意位置，不要求紧邻input，但必须已存在于 DOM 中（不能是后续 JS 插入却未触发重渲染的节点）
option 的 value 是唯一触发联想的字段
datalist 内部只看 option 的 value 属性做匹配，label、文本内容、data-* 自定义属性均不参与过滤。用户输入时，浏览器自动对所有 option[value] 进行前缀/子串匹配（具体策略由 UA 决定，Chrome 主要为前缀匹配）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保每个
option都有value，空value=""或缺失会导致该项无法被匹配到 - 不要依赖
option的 innerText 做搜索源 —— 即使写成<option>苹果</option>，也等价于<option value="">苹果</option>，不会响应输入 - 如需展示别名，可用
label属性辅助显示（仅影响下拉项文案），但匹配逻辑仍只走value：<option value="apple" label="? 苹果"></option>
IE 和旧版 Edge 不支持 list + datalist 联动
IE 全系（包括 IE11）完全忽略 list 属性，datalist 渲染为空白或直接被跳过。Edge 12–18 有支持但存在光标定位、回车选中等兼容性问题。现代 Chrome/Firefox/Safari/Edge(Chromium) 均稳定支持。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 需要兼容 IE 时，必须降级为 JS 方案（如监听
input事件 + 手动渲染下拉面板 + 模拟选中逻辑） - 用
Modernizr.input.list或简单特征检测判断：const supportsDatalist = 'list' in document.createElement('input'); - 注意 Safari 在 iOS 15.4 之前对
datalist的option动态增删响应滞后，建议初始化时一次性写好全部option
输入值不会自动同步到 input.value，需手动处理选中逻辑
用户点击 datalist 下拉项后，浏览器会把对应 option[value] 填入 input 的 value，但这个过程不触发 input 或 change 事件（Chrome 99+ 开始对 input 事件有限支持，但不可靠）。这意味着：表单提交时值虽在，但监听不到“选择发生”这一动作。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 若需响应选中行为，必须监听
input的input事件，并比对前后值变化（注意防抖，避免高频触发） - 不要依赖
change事件捕获 datalist 选中 —— 它只在失焦且值改变时触发，无法区分是手动输入还是下拉选择 - 服务端校验仍需兜底：前端联动纯属体验优化，
value可被任意修改，后端必须按业务规则验证最终提交值
list 和 id 的大小写与空格一致性，以及误以为 datalist 能响应非 value 字段。这两点几乎占了 70% 的“为什么没联想”类问题。 
