list属性必须严格匹配同页面存在的datalist元素id，仅对text、search、url、tel、email、number类型input生效，value是唯一匹配字段，移动端兼容性差。
list 属性必须指向同页面存在的
HTML 中 list 是 <input> 的原生属性，它本身不生成下拉，只负责“关联”——必须严格匹配一个 <datalist></datalist> 元素的 id 值，否则输入框完全不会显示建议下拉。
常见错误是：
-
list值写错大小写或拼写（比如写成data-list-id而不是myOptions） -
<datalist></datalist>缺少id，或id未被任何input[list]引用 -
<datalist></datalist>放在外、或被 JS 动态移除但input还留着list属性
正确写法示例：
<input type="text" list="browsers"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> </datalist>
只有 text、search、url、tel、email、number 类型 input 才支持 list
list 属性在规范中仅对部分 type 生效。如果设了 type="date" 或 type="checkbox"，即使 list 指向合法 <datalist></datalist>，浏览器也直接忽略，不会触发下拉。
可安全使用的类型包括：
-
type="text"（最常用） type="search"-
type="url"、type="tel"、type="email" -
type="number"（注意：此时<option></option>的value必须为有效数字字符串，如"42"，不能是"forty-two"）
不支持的类型：date、time、range、color、file、hidden 等——这些有自己原生控件，不走 datalist 路线。
option 的 value 是唯一生效字段，label 不参与匹配
<datalist></datalist> 中的 <option></option> 只有 value 属性会被用于输入时的自动补全和过滤。哪怕写了 label，比如 <option value="en" label="English"></option>，用户输入 “Eng” 也不会匹配，因为匹配逻辑只看 value 字符串是否包含/开头匹配当前输入内容。
所以实际使用中：
- 别依赖
label做提示，它在大多数浏览器里根本不显示 - 如果想支持中文拼音搜索（如输“zhong”出“中国”），得手动把拼音塞进
value，比如<option value="zhongguo 中国"></option> -
<option></option>可以重复，但无意义；浏览器只按value去重展示
移动端兼容性差，iOS Safari 基本不显示下拉
桌面 Chrome/Firefox/Edge 对 list+datalist 支持良好，但 iOS Safari（截至 iOS 17）完全不渲染下拉面板，Android Chrome 则部分机型有延迟或样式错位。这不是 bug，是规范允许的“可选实现”。
如果项目需覆盖移动端用户：
- 不要单独依赖
datalist实现核心功能（比如必填项靠它选值） - 用 JS 拦截
input事件 + 自绘下拉（如select2、choices.js）做降级 - 检测是否支持：
'list' in document.createElement('input')只能判断属性存在，不能保证 UI 渲染，真要判断得靠 feature detect + 实际渲染测试
原生 datalist 最适合做轻量级、非关键、桌面优先的输入辅助——比如搜索框的常用关键词提示。一旦涉及数据一致性或交互闭环，就得换方案。
