datalist元素需通过input的list属性绑定且id值严格匹配才能生效；仅支持text类输入类型；option必须含value属性，匹配为不区分大小写的前缀匹配；动态添加option需重新聚焦input才可能生效；ios safari基本不显示建议菜单，移动端兼容性差。
dataList 元素必须搭配 input 的 list 属性才能生效
很多人写了 <datalist></datalist> 却没看到下拉建议，根本原因是没在对应的 <input> 上设置 list 属性，且属性值要和 datalist 的 id 完全一致。浏览器只认这个绑定关系，不靠位置、不靠 name、不靠 class。
-
<input list="browsers">和<datalist id="browsers"></datalist>的id与list值必须严格匹配（区分大小写） - 如果
list属性值拼错、多空格、或对应datalist缺失，输入框完全不会显示建议菜单 -
type不限于text，search、email、url等也支持，但number、date、checkbox等不支持
option 的 value 是唯一触发建议的字段
<datalist></datalist> 内部只认 <option value="..."></option> 的 value 属性内容作为可匹配建议项。文本节点（如 <option>Chrome</option>）、label 属性、或自定义属性均无效。
- 正确写法：
<datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> </datalist>
- 错误写法：
<option>Chrome</option> <!-- 没有 value，不显示 --> <option label="Chrome Browser" value="Chrome"></option> <!-- label 被忽略 -->
- 匹配是**前缀匹配**（case-insensitive），输入 “c” 会匹配 “Chrome”、“CSS”，但不会匹配 “Microsoft”
不能用 JavaScript 动态注入 option 并期望立即生效
虽然可以往 datalist 里用 appendChild 或 innerHTML 加 option，但多数浏览器（尤其是 Chrome 和 Edge）不会实时刷新建议列表——已展开的下拉菜单不会更新，新输入也不会触发新增项。
- 首次渲染后动态添加
option，需用户**重新聚焦 input 并再次输入**才可能生效（行为不稳定） - 没有标准 API 触发“重载建议列表”，
input的blur/focus也不可靠 - 如需动态建议，应改用
autocomplete+ 自定义下拉（如div+position: absolute），或使用成熟库（如awesomplete）
移动端兼容性差，iOS Safari 几乎不显示建议菜单
iOS Safari（包括 iOS 17+）对 datalist 的支持形同虚设：它解析 HTML、不报错，但**从不显示下拉建议框**。Android Chrome 支持较好，但软键盘弹出时建议区域常被遮挡或错位。
立即学习“前端免费学习笔记（深入）”；
- 检测方式：用
if ('list' in document.createElement('input'))只能判断属性存在，不能保证 UI 可见 - 真机测试比桌面模拟器重要得多；仅靠 Chrome DevTools 的 device mode 会误判
- 生产环境若需跨平台建议，
datalist仅适合做降级 fallback，主逻辑必须另起一套
实际用起来，datalist 最适合静态、少量、无需交互控制的场景，比如固定国家列表、预设型号。一旦涉及异步加载、模糊搜索、高亮关键词或 iOS 支持，就得绕开它。
