HTML教程-HTML<datalist>标签

HTML <datalist> 标签用于在表单元素上提供自动完成功能。它为用户提供了一个预定义选项列表，以供选择数据。

datalist 标签是在 HTML5 中引入的。

<datalist> 标签应该与包含 "list" 属性的 <input> 元素一起使用。"list" 属性的值与 datalist 的 id 相关联。

HTML datalist 标签也支持全局属性和事件属性。

HTML datalist 标签示例

让我们来看一个 HTML5 datalist 标签的简单示例。如果您按下 A 键，它将显示以字母 A 开头的球员列表。

<label>
  Enter your favorite cricket player: Press any character<br/>
  <input type="text" id="favCktPlayer" list="CktPlayers">
  <datalist id="CktPlayers">
    <option value="Sachin Tendulkar">
    <option value="Brian Lara">
    <option value="Jacques Kallis">
    <option value="Ricky Ponting">
    <option value="Rahul Dravid">
    <option value="Shane Warne">
    <option value="Rohit Sharma">
    <option value="Donald Bradman">
    <option value="Saurav Ganguly">
    <option value="AB diVilliers">
    <option value="Mahendra Singh Dhoni">
    <option value="Adam Gilchrist">
  </datalist>
</label>

输出

Enter your favorite cricket player: Press any character

支持的浏览器

元素	Chrome	IE	Firefox	Opera	Safari
<datalist>	是	是	是	是	是