原生 datalist 能用但需严格满足条件：input 的 list 属性与 datalist 的 id 必须字符级完全一致；仅 text、search、url、tel、email、number 类型支持；option 必须有非空 value；autocomplete="off" 会禁用功能；匹配逻辑、事件和样式均受限且不可控。
原生 datalist 能用，但必须严格满足几个硬性条件，否则它就“隐身”——不是 bug，是设计如此。
input 的 list 属性和 datalist 的 id 必须字符级一致
这是最常失效的点。浏览器不报错、不警告，只是默默跳过联想逻辑。
-
list="browsers"必须对应<datalist id="browsers">，大小写、空格、引号都不能多也不能少 - 写成
list="Browsers"或list=" browsers "都无效 -
name或class属性完全不参与绑定，别拿它们当 ID 用 -
datalist可以放在<body>任意位置（甚至</body>前），只要 DOM 中存在即可
option 的 value 是唯一匹配字段，且不能为空
只写 <option>Chrome</option> 是无效的；label 不参与匹配，只影响显示。
- ✅ 正确：
<option value="Chrome"></option>或<option value="Chrome">谷歌浏览器</option> - ❌ 无效：
<option>Chrome</option>（无value） - ❌ 无效：
<option value="">Chrome</option>（value为空字符串） -
label属性仅在部分浏览器中改变下拉项文字，比如<option value="ff" label="Firefox"></option>提交值仍是"ff"
哪些 input type 支持 list？不支持的类型会直接忽略
不是所有 input 都能用 datalist，只有明确列出的类型才生效。
立即学习“前端免费学习笔记（深入）”；
- 支持：
text、search、url、tel、email、number - 不支持：
hidden、checkbox、radio、date、datetime-local、file—— 写了list也白搭 -
type="number"有隐含限制：输入内容需能被解析为数字才触发匹配（输 "a" 就不会出建议） - 如果加了
autocomplete="off"，整个datalist功能会被禁用
原生行为不可控：前缀匹配、无事件钩子、Safari 限制多
想靠它实现“拼音首字母搜索”或“输入即请求后端”，注定要换方案。
- 匹配逻辑由浏览器决定：Chrome 新版支持子串，Firefox 和 Safari 多数只做前缀匹配，且大小写敏感
- 没有
onselect事件；选中后只触发input和change，无法区分是手输还是点击选项 - Safari 不支持键盘导航、Enter 强制选中，中文前缀匹配更严（输 “北” 可能不匹配 “北京市”）
- 样式几乎无法定制：
::webkit-list-box仅限 Chromium 内核，且只允许改font、color、background等极少数属性
真正容易被忽略的是：它不校验、不强制、不联动、不扩展。你给它静态数据，它就还你静态反馈。需要交互逻辑、动态更新或兼容性兜底时，就得自己用 JS 搭 <div> + <ul> 重做一遍。
