datalist 绑定需 list 与 id 字符串完全匹配，仅支持特定 input 类型，option 的 value 是唯一生效字段，移动端兼容性差且样式不可控。
input 的 list 属性必须严格等于 datalist 的 id，大小写、空格、拼写全错一个就失效。
为什么 list 和 id 必须完全匹配
浏览器不解析语义，只做字符串精确比对。哪怕 list="browsers" 对应 id="Browsers"（首字母大写），或 id="browsers "（末尾多一个空格），绑定就断开。
-
list只认id，不认name、class或其他属性 -
datalist可以放在页面任意位置——head里、footer里、甚至在另一个section中，只要 DOM 已加载且id存在即可 - 页面中若存在多个相同
id，浏览器只取第一个，其余被忽略（违反 HTML 唯一性规范，也导致后续绑定失败）
option 的 value 是唯一生效字段
用户看到的建议内容、选中后填入 input.value 的值，全部来自 option 的 value 属性。标签内文本（如 <option value="Chrome">谷歌浏览器</option> 中的“谷歌浏览器”）完全被忽略。
- 不写
value时，浏览器会退而取 textContent 作为 value，但不可靠，尤其含空格或 HTML 实体时容易出错 -
label属性虽可声明（如<option value="en" label="English"></option>），但绝大多数浏览器不渲染它，仅部分辅助技术可能读取 - 重复的
value会导致下拉中出现多个相同项，无报错但体验差；建议提前去重
哪些 input 类型真正支持 datalist
不是所有 type 都能触发建议菜单。支持情况因浏览器而异，但安全范围很窄：
立即学习“前端免费学习笔记（深入）”；
- 明确稳定支持：
type="text"、type="search"、type="url"、type="tel"、type="email" - 部分支持、行为不一致：
type="number"（Chrome 允许，Firefox 禁用）、type="date"（仅部分匹配前缀，且移动端常失效） - 完全不支持：
type="password"、type="hidden"、type="checkbox"、type="file"、type="range" - 禁用状态（
disabled或readonly）下，datalist 提示直接消失
移动端和旧浏览器的隐形陷阱
原生 datalist 在 iOS Safari 上直到 15.4+ 才完整支持；更早版本可能显示空白下拉、点击无响应，甚至完全不触发。Android WebView 表现也高度依赖系统版本。
- 检测是否可用：
"list" in document.createElement("input")返回true才能放心用原生逻辑 - JS 动态插入
option后，不会自动刷新建议列表——必须重新聚焦 input 或触发一次用户输入（哪怕按个空格）才能生效 - 不要试图用
input.value = "xxx"模拟用户输入来唤出菜单，原生机制对此无响应；只有键盘输入、粘贴、或手动点下拉箭头才触发 - 样式完全不可控：下拉面板是浏览器原生控件，
CSS无法修改其尺寸、颜色或动画，只能调 input 本身
最易被忽略的一点：datalist 不是“组件”，它没有生命周期、不派发自定义事件、也不响应 JS 对 value 的静默修改。它的行为边界非常清晰——只响应原生输入流，且只在匹配类型 + 正确绑定 + DOM 就绪这三者同时满足时才工作。
