最常见原因是list属性值与datalist的id不完全匹配：大小写、空格、引号或拼写差一个字符均失效，浏览器静默忽略；datalist必须为input兄弟元素而非其子元素，且仅对text、search、email等类型生效，option只认value属性。
为什么 input list="xxx" 没反应？
最常见原因是 list 属性值和 datalist 的 id 不完全一致：大小写、空格、引号、拼写差一个字符都会失效。浏览器不会报错，只是静默忽略。
-
datalist必须是input的兄弟元素，不能嵌套在input里（HTML 规范禁止，控制台会报Failed to execute 'appendChild' on 'Node'） -
list是属性名，不是标签名；datalist自身没有name或value，只靠id关联 - 检查是否用了
type="hidden"、type="checkbox"等不可编辑类型——datalist只对type="text"、"search"、"email"等生效
option 里写 label 还是只用 value？
option 在 datalist 中只认 value 属性，label 属性被完全忽略。用户点击或回车选中后，填入输入框的是 value 的值，不是显示文本。
- 如果写
<option value="Chrome">Google Chrome</option>，“Google Chrome”仅作视觉提示，提交/读取的仍是"Chrome" - 想让显示和提交值一致，就别写多余内容：
<option value="Chrome"></option> - 重复的
value会导致建议项重复出现，浏览器不做去重
如何让输入时自动过滤选项？
datalist 本身不提供过滤能力——它只是把所有 option 全部列出来，由浏览器决定是否高亮匹配字符。输入“c”不会筛出 Chrome，而是照常显示全部选项。
- 部分浏览器（如 Chrome）会加粗匹配字符，但列表不收缩；Firefox 支持方向键高亮，Safari 基本不响应键盘导航
- 真要实现输入即过滤，得监听
input事件 + JavaScript 动态更新datalist内的option元素 - 注意：DOM 修改后，已展开的下拉框通常不会重绘，需先
blur()再focus()才能刷新 - 别给
option加disabled或selected——这些属性被忽略，datalist没有选中态概念
兼容性和降级处理要注意什么？
IE 完全不支持 datalist，Edge 12–18 有样式错位、无法聚焦等问题；Safari 对 type="number" 或 type="date" 支持极差，建议只用于 type="text" 或省略 type。
立即学习“前端免费学习笔记（深入）”；
- 检测支持性：用
typeof HTMLDataListElement !== "undefined"，IE 返回undefined -
autocomplete="off"会禁用datalist，慎用 - 服务端渲染时，若需降级，建议 fallback 到
select+ JS 同步input值，而不是隐藏datalist后留白 - CSS 无法控制下拉面板样式——各浏览器无统一伪类钩子，
::-webkit-inner-spin-button等无效
