HTML datalist了解一下，如何仅使用它创建自动完成输入女神小例子

2020年第21期

小技巧系列

本文教你如何仅使用HTML创建自动完成输入，选择你心中的女神。

HTML datalist

要实现这个功能，首先要创建一个标签和输入框。

<label for="goddess">你的女神是谁？</label>
<input type="text" id="goddess" name="goddess">

接下来，创建一个 datalist 列表元素。

在其中，为每个自动完成的选择添加一个 option 元素。使用上面的示例，我们将为每个女神创建一个选项。

<label for="goddess">你的女神是谁？</label>
<input type="text" id="goddess" name="goddess">

<datalist>
 <option>关晓彤</option>
 <option>柳岩</option>
 <option>王鸥</option>
 <option>鬼鬼</option>
 <option>潘晓婷</option>
</datalist>

最后，我们需要将 datalist 与 input 关联。

为 datalist 提供一个 id，并将 list 属性添加到您的输入中，其值等于您的 datalist id。

<label for="goddess">你的女神是谁？</label>
<input type="text" id="goddess" name="goddess" list="goddess-list">

<datalist id="goddess-list">
 <option>关晓彤</option>
 <option>柳岩</option>
 <option>王鸥</option>
 <option>鬼鬼</option>
 <option>潘晓婷</option>
</datalist>

现在，当用户键入内容时，浏览器将显示一个可供选择的选项列表。

浏览器兼容性

datalist元素可在所有现代浏览器中使用

阅读后如果觉得对您有帮助，可以关注作者、收藏、转发和右下角点个“在看”，这是对作者写出优质文章最大的鼓励了。

聚焦大前端技术和成长的公众号

关注我的公众号，第一时间接收原创、精选干货文章

来都来了，右下角点个在看再走吧