<datalist>: 数据列表标签
最后更新：2026-10-13
<datalist>数据列表标签
为 input 提供一组预输入建议（下拉提示），用户仍可自由输入，需配合 input 的 list 属性。
| 分类 | 表单 |
|---|---|
| 内容模型 | 流式内容 |
| 允许的父元素 | 接受流式内容的元素 |
| 闭合标签 | 需要 </datalist> 标签 |
| 状态 | 标准 |
📝 语法
<input list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
</datalist>▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <datalist> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： datalist 本身不显示，只通过 input 的 list 属性被引用；各浏览器提示样式不同。
❓ 常见问题
Qdatalist 和 select 有什么区别？
A
<datalist> 配合 <input list> 提供「可输入 + 可选建议」：用户既能打字自由输入，也能从建议列表选；<select> 只能从固定选项中选。需要限制为固定值用 select，允许自由输入用 datalist。Qdatalist 怎么和 input 关联？
Adatalist 设
id，input 设同名的 list 属性：<input list='cities'><datalist id='cities'>…</datalist>。一个 datalist 可以服务多个 input，反之每个 input 一次只能关联一个 datalist。Qdatalist 的兼容性有问题吗？
A现代浏览器均支持，但交互样式差异大：Chrome 显示下拉箭头，Safari 显示建议浮层。且无法自定义建议项的样式——这些限制要提前接受，或者改用 JS 自动补全组件。
🏷️ 相关标签
💡 相关案例
更多案例即将上线，敬请期待。
📚 相关教程
