datalist 元素必须通过 input 的 list 属性关联才能生效，且 list 值须与 datalist 的 id 完全一致；单独使用不显示内容，常见错误是遗漏 list 属性或大小写/空格不匹配。
HTML datalist 元素必须配合 input 的 list 属性才能生效
单独写 <datalist></datalist> 标签不会显示任何内容，也不会自动触发建议。它只是个“数据容器”，必须通过 input 的 list 属性关联，且该属性值要和 datalist 的 id 完全一致。
常见错误是只写了 datalist 却忘了在 input 上加 list，或者大小写/空格不匹配导致关联失败。
-
<input list="browsers"><datalist id="browsers">...></datalist>✅ 正确 -
<input list="BROWSERS"><datalist id="browsers">...></datalist>❌ 大小写不一致，失效 -
<input><datalist id="browsers">...></datalist>❌ 缺少list属性，完全无响应
option 里的 value 是唯一生效字段，text 不影响匹配逻辑
用户输入时，浏览器只比对 option 的 value 属性值（不区分大小写），并按前缀匹配展示建议。即使你写了 <option>Chrome</option>（没有 value），浏览器也会把文本内容当作 value，但这种写法不可靠，尤其含空格或特殊字符时容易出错。
- 推荐显式写
<option value="Firefox">Mozilla Firefox</option>—— 下拉显示“Mozilla Firefox”，但匹配依据是 “Firefox” - 避免
<option>Edge (Chromium)</option>—— 某些浏览器可能无法正确提取 value，导致不触发建议 - 如果想支持模糊匹配（如输 “chr” 匹配 “Chrome”），
datalist原生不支持；需用 JS 补充实现
不能用 CSS 直接控制下拉面板样式，兼容性差异大
datalist 的建议面板是浏览器原生控件，::-webkit-listbox 或 ::-moz-listbox 等伪元素支持极弱，且各浏览器行为不一。Chrome 仅允许改 option 的字体颜色/背景色，Firefox 几乎不支持任何样式干预。
- 别试图用
height、max-height或overflow控制面板高度 —— 无效 - 不要依赖
:focus-within或~选择器来定位面板 —— 面板 DOM 不在input后续兄弟位置，无法用纯 CSS 选中 - 若需定制样式（如圆角、阴影、图标），必须放弃
datalist，改用autocomplete+div自定义下拉
移动端 Safari 和旧版 Android 浏览器支持不完整
iOS 15.4 之前，Safari 对 datalist 的支持仅限于部分表单类型（如 type="search"），type="text" 可能完全不显示建议；Android WebView（尤其 Android 9 及更早）常忽略 datalist 或只在聚焦后延迟触发。
- 测试时务必在真机 Safari 和主流 Android WebView（如微信内置浏览器）中验证
- 关键业务场景（如地址选择、商品搜索）不要只依赖
datalist，应降级为 JS 实现的下拉建议 - 可通过
if ('list' in document.createElement('input'))检测基础支持，但无法判断是否真正可用
实际用起来最易被忽略的点：它不发射事件、不提供 API、不支持键盘导航以外的交互 —— 所有“选中后执行逻辑”的需求，都得监听 input 的 change 或 blur，再手动校验值是否在 datalist 列表中。
