list属性必须严格匹配同级或父级datalist元素的ID，仅支持text类input类型，且iOS Safari等移动端浏览器普遍不渲染下拉建议。
list 属性必须指向同级或父级的 datalist 元素 ID
HTML 中 list 属性本身不“关联”任何东西，它只是告诉浏览器：“去 DOM 里找一个 id 和这个值一样的 datalist 元素”。如果找不到，下拉建议就完全不会出现——连控制台都不报错，静默失效。
常见错误是把 datalist 放在 body 深层嵌套里，而输入框在别处，ID 拼写大小写不一致，或者用了 class 名当 ID 值。只要 DOM 中查不到对应 id 的 datalist，list 就等于没写。
-
list的值必须严格匹配datalist的id（区分大小写） -
datalist可以放在任意位置，只要在当前文档中能通过document.getElementById()找到 - 不要用
name或class替代id；list只认id - 同一个
datalist可被多个输入框共用，只要它们的list属性指向同一个 ID
datalist 内部只能用 option，不能用 optgroup 或其他标签
datalist 是个轻量级建议容器，浏览器只解析其直接子节点中的 option 元素。写进去的 div、span、optgroup 全部被忽略——没有警告，也不渲染。
如果你需要分组或带描述的选项，得靠 JS 动态生成 option，或者放弃 datalist 改用自定义下拉组件。
立即学习“前端免费学习笔记（深入）”；
- 每个
option必须有value属性，否则不显示在建议列表中 -
option可以带label属性，但仅用于显示，不影响实际输入值 -
option的文本内容和value可不同：<option value="js">JavaScript</option>
input 类型必须支持 list 属性，否则无效
不是所有 input 类型都支持 list。只有 text、search、url、tel、email、number 等文本类类型才生效。password、hidden、checkbox、file 等类型写了 list 也完全没反应。
- 默认类型是
text，所以没写type的输入框通常可用 -
type="number"虽支持list，但用户只能输入数字，建议项若含非数字字符会被过滤掉 -
type="date"不支持list——日期选择器由浏览器原生控件接管，绕不开
移动端兼容性差，iOS Safari 基本不显示下拉建议
桌面 Chrome/Firefox/Edge 都支持 datalist 建议，但 iOS Safari（包括所有基于 WebKit 的 iOS 浏览器）长期不渲染下拉面板——输入框获得焦点后，什么也不弹。Android Chrome 大部分版本支持，但某些定制 ROM 浏览器会跳过。
这意味着：如果你的用户大量使用 iPhone，datalist 仅作降级补充，不能作为核心交互依赖。
- 不能靠
focus或input事件监听来判断建议是否弹出——iOS 上这些事件照常触发，但面板就是不出现 - 没有标准 API 能检测浏览器是否真正支持
datalist渲染，只能 UA 判断或 feature detection + 实际测试 - 想跨端统一体验，得用
autocomplete+ 后端 suggestion API 或第三方库如awesomplete
list="xxx" 和对应 <datalist id="xxx"> 的存在与可达性。其余都是边界条件——而这些条件，在真实项目里，十次有八次会卡在 ID 拼错或移动端失效上。 
