用datalist为input添加下拉建议需通过list属性关联同名id，仅对可编辑type生效，option仅value参与匹配，无内置过滤、键盘导航或样式控制能力，IE完全不支持。
怎么用 datalist 给 input 加下拉建议
直接把 datalist 和 input 用 list 属性连起来就行，不是子元素关系，也不需要 JavaScript 绑定。
-
datalist必须有id，input的list属性值必须和它完全一致（区分大小写） - 浏览器只在
input type="text"、"search"、"url"、"tel"、"email"、"number"等可编辑类型上触发建议，type="hidden"或"checkbox"不生效 -
option里只有value属性起作用，label是纯展示文本，不参与匹配逻辑
<input type="text" list="browsers"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> </datalist>
datalist 的 option 值不自动过滤？
对，datalist 本身不提供搜索过滤功能——它只是把所有 option 全部列出来，由浏览器决定是否高亮匹配项。输入“c”不会自动筛出 Chrome，而是照常显示全部选项，部分浏览器（如 Chrome）会加粗匹配字符，但列表不会收缩。
- 真要实现输入即过滤，得用
input事件 + JavaScript 动态更新datalist里的option，但注意：DOM 修改后，已展开的下拉框通常不会重绘，需先 blur 再 focus 才能刷新 - 别试图给
option加disabled或selected——这些属性被忽略，datalist没有选中态概念 - 重复
value会导致建议项重复出现，浏览器不 dedupe
为什么输入后按方向键选不到 datalist 选项？
因为 datalist 不是 select，它没有键盘导航能力。用户只能靠鼠标点击，或输入完整值后回车/Tab 触发填充；方向键、Enter 键选中等行为由浏览器实现，且兼容性差——Firefox 支持方向键高亮，Chrome 不支持，Safari 基本不响应。
- 不能依赖键盘操作完成选择，这是原生限制，不是 bug
- 如果业务要求键盘友好，得放弃
datalist，改用带 ARIA 的自定义下拉（如role="listbox"+role="option"） -
autocomplete="off"会禁用datalist建议，别乱加
IE 和旧版 Edge 对 datalist 的支持有多坑
IE 完全不支持 datalist，Edge 12–18 部分支持但存在样式错位、无法聚焦、option 文本截断等问题。哪怕加了 polyfill，也无法还原原生行为。
立即学习“前端免费学习笔记（深入）”；
- 检测方式很简单：
typeof HTMLDataListElement !== "undefined"，IE 返回undefined - 不要指望 CSS 伪类（如
::-webkit-inner-spin-button）能控制datalist下拉面板样式——它不在标准 CSS 范围内，各浏览器无统一钩子 - 服务端渲染时，若需降级，建议 fallback 到
select+ JS 同步 input 值，而不是隐藏datalist后留白
真正难处理的不是怎么写，是它既不像 select 可控，也不像 autocomplete 那样有成熟 JS 生态——你得时刻想着“用户没点鼠标时，这个东西其实什么都没做”。
