试一试
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate"></option>
<option value="Coconut"></option>
<option value="Mint"></option>
<option value="Strawberry"></option>
<option value="Vanilla"></option>
</datalist>
label {
display: block;
margin-bottom: 10px;
}
要将 <datalist> 元素绑定到控件上，我们要在 id 属性中为其指定一个唯一的标识符，然后在 <input> 元素中添加 list 属性，其值与该标识符相同。只有特定类型的 <input> 支持此行为，并且其表现也可能因浏览器而异。
每个 <option> 元素都应有一个 value 属性，它代表一个建议输入到输入框中的值。它还可以有一个 label 属性，或者在没有该属性时，可以有一些文本内容，浏览器可能会显示这些内容来代替 value（Firefox），或者作为 value 的补充文本（Chrome 和 Safari）。下拉菜单的确切内容取决于浏览器，但当被点击时，输入到控件字段中的内容将始终来自 value 属性。
注意： <datalist> 不能替代 <select>。<datalist> 本身并不代表一个输入；它是一个为关联控件提供建议值的列表。该控件仍然可以接受任何通过验证的值，即使该值不在建议列表中。
属性
此元素除了全局属性（所有元素通用）外，没有其他属性。
无障碍
在决定使用 <datalist> 元素时，请注意以下一些无障碍性问题：
- 数据列表选项的字体大小不会缩放，始终保持相同大小。当其余内容放大或缩小时，自动建议的内容不会变大或变小。
- 由于使用 CSS 来定位选项列表非常有限甚至不存在，因此无法为高对比度模式设置渲染样式。
- 一些屏幕阅读器/浏览器组合，包括 NVDA 和 Firefox，不会播报自动建议弹出窗口的内容。
示例
文本类型
当用户点击或双击控件时，text、search、url、tel、email 和 number 类型中的建议值会显示在下拉菜单中。通常，控件的右侧也会有一个箭头，指向存在预定义值。
<label for="myBrowser">Choose a browser from this list:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
<option value="Chrome"></option>
<option value="Firefox"></option>
<option value="Opera"></option>
<option value="Safari"></option>
<option value="Microsoft Edge"></option>
</datalist>
日期和时间类型
month、week、date、time 和 datetime-local 类型可以显示一个界面，方便用户选择日期和时间。预定义的值可以显示在其中，让用户快速填充控件值。
注意：当不支持这些类型时，将渲染一个基本的 text 类型，创建一个文本字段。该字段将正确识别建议值，并以下拉菜单的形式向用户显示。
<input type="time" list="popularHours" />
<datalist id="popularHours">
<option value="12:00"></option>
<option value="13:00"></option>
<option value="14:00"></option>
</datalist>
范围类型
当与 range 输入类型关联的数据列表的 <option> 元素中包含 value 属性时，它们将显示为一系列刻度标记，用户可以轻松选择。
<label for="tick">Tip amount:</label>
<input type="range" list="tickmarks" min="0" max="100" id="tick" name="tick" />
<datalist id="tickmarks">
<option value="0" label="0%"></option>
<option value="10" label="Minimum Tip"></option>
<option value="20" label="Standard"></option>
<option value="30" label="Generous"></option>
<option value="50" label="Very Generous"></option>
</datalist>
注意： label 属性旨在为刻度标记提供标签，如 HTML 标准中所定义。然而，目前浏览器的支持情况各不相同；标签可能不会在视觉上或作为工具提示显示。
颜色类型
color 类型可以在浏览器提供的界面中显示预定义的颜色。
<label for="colors">Pick a color (preferably a red tone):</label>
<input type="color" list="redColors" id="colors" />
<datalist id="redColors">
<option value="#800000"></option>
<option value="#8B0000"></option>
<option value="#A52A2A"></option>
<option value="#DC143C"></option>
</datalist>
技术摘要
规范
| 规范 |
|---|
| HTML # the-datalist-element |
浏览器兼容性
加载中…