最可靠检测方式是'list' in document.createElement('input')，返回false即不支持；IE9–IE11、旧Edge均不支持，Safari 12–15.3虽返回true但UI可能不渲染。
datalist 在 IE11 及更早版本中完全不生效，Safari 旧版（iOS 15.4 之前）显示异常，动态更新在 Safari 和旧 Edge 中可能静默失败——不能靠“写了就有效”来假设行为。
如何检测浏览器是否支持 datalist
别用 UA 字符串判断，直接查 DOM 能力：
-
'list' in document.createElement('input')是最可靠的方式，返回false就代表原生不支持 - IE9–IE11 返回
false；EdgeHTML（旧版 Edge）也返回false；Safari 12–15.3 某些场景下返回true但 UI 不渲染，所以检测通过 ≠ 功能可用 - 检测后建议加个 class 到
<html>上，比如no-datalist，方便后续 CSS/JS 分流
静态回退：纯 HTML 层降级方案
当检测到不支持时，不依赖 JS 也能保基本功能：
- 把
<datalist>内容转成普通<div class="suggestions-fallback">，放在<input>下方，用 CSS 控制默认隐藏、聚焦时显示 - 每个
<option value="xxx">改成<button type="button" data-value="xxx">xxx</button>，点击即填充 input 并触发input事件 - 避免用
<select>回退——它强制用户选择，违背datalist“可选可输”的设计本意
动态回退：JS 模拟完整交互链
要支持键盘导航（上下键）、回车选中、模糊匹配？必须接管全部逻辑：
立即学习“前端免费学习笔记（深入）”；
- 监听
input事件，但加防抖（setTimeout+clearTimeout），避免每敲一个字都查 API 或遍历数组 - 匹配时别只做前缀匹配：
item.value.toLowerCase().includes(inputValue.toLowerCase())才接近用户预期 - 浮动列表用
<div role="listbox">+<div role="option">，手动管理aria-activedescendant和焦点，否则屏幕阅读器不可用 - 关键细节：Chrome 点击 datalist 选项会触发
input事件，但 Safari 不一定；JS 模拟时必须显式inputEl.dispatchEvent(new Event('input', { bubbles: true }))
label 属性的兼容性陷阱
label 属性看似能加副标题，实际是“纸面功能”：
- Firefox 完全忽略
label，只显示value - Chrome 110+ 和 Safari 16.4+ 支持，但 iOS Safari 直到 17.4 才修复（2024 年底才普及）
- 如果用了
<option value="foo" label="Foo (official)"></option>，又没做 JS 回退，大量用户看到的只是 "foo" - 真要多列展示，别碰
label——它不解决任何结构问题，反而增加兼容性盲区
真正难的不是让下拉出现，而是让“从下拉选中”这个动作在所有浏览器里都能被一致捕获并响应。很多团队卡在这一步，最后发现不是 datalist 写错了，是根本没处理好事件冒泡和 focus 状态同步。
