datalist需id匹配且唯一，仅支持option的value属性，仅text/search/url/tel/email类型稳定支持，不支持样式控制与选中事件监听，适用静态轻量提示场景。
list属性必须指向同页面存在的datalist的id
这是最常出错的地方：很多人写 <input list="suggestions"> 却忘了在页面里放一个 <datalist id="suggestions"></datalist>，或者 id 拼写不一致（比如大小写、多空格、下划线误写成短横）。浏览器完全静默失败——既不报错，也不显示建议。检查方法很简单：打开开发者工具，搜索该 id 是否真实存在且唯一。
datalist里的option只支持value属性，不支持label
datalist 的子元素只能是 <option></option>，而且只有 value 属性生效；写 label 或 data-* 属性不会被自动用于匹配或显示。用户输入时，浏览器只按 value 的字符串前缀匹配（区分大小写），且不支持正则或模糊匹配。
常见错误示例：
<datalist id="browsers"><option value="Chrome" label="Google Chrome"></option> <option value="Firefox" data-id="fx"></option></datalist>
上面的 label 和 data-id 都被忽略。正确写法只需：
<datalist id="browsers"><option value="Chrome"></option> <option value="Firefox"></option> <option value="Safari"></option></datalist>
输入框类型要和建议内容语义匹配，否则建议可能不触发
不是所有 type 都支持 list。例如 type="number" 或 type="date" 在多数浏览器中会忽略 datalist 建议（Chrome 对 date 完全不显示下拉，但对 number 会显示但仅作 range 提示）。真正稳定支持的只有：text、search、url、tel、email。
实操建议：
- 想用建议功能，优先设
type="text"，哪怕语义上是邮箱或网址 - 如果必须用
type="email"，确认用户输入格式（如含 @）后，再用 JS 校验，别依赖 type 自带校验+list 联动 - 移动端 iOS Safari 对
datalist支持极弱，几乎不显示建议，需准备降级方案（如自实现下拉）
无法控制建议弹出时机和样式，也不能监听“选中建议项”事件
原生 datalist 是纯展示型组件：没有 onselect、没有 show() 方法、不能用 CSS 选中下拉面板（它不属于 DOM 可样式化节点）。用户点击某条建议后，只是把 value 填入 input，不会触发 change 或 input 以外的特殊事件。
这意味着：
- 无法区分用户是手动输入还是点选建议 —— 二者都只触发
input事件 - 不能禁用某条
option，也不能动态增删option后立刻生效（需重新 focus/blur 才可能刷新建议列表） - 样式完全不可控：下拉框位置、宽度、高亮色、字体均由浏览器决定，CSS 无效
如果你需要高亮关键词、分组、远程加载、键盘导航或点击回调，datalist 不是解决方案，得换用 autocomplete 库或自建下拉组件。
真正能靠 list + datalist 解决的，只有静态、小规模、对交互无定制要求的输入提示场景。一旦需求超出这个边界，就得承认它只是个轻量备选，不是通用 autocomplete 替代品。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
