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

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元素可在全部现代浏览器中使用

---

关注公众号，第一时间接收最新文章。若是对你有一点点帮助，能够点喜欢点赞点收藏，还能够小额打赏做者，以鼓励做者写出更多更好的文章。

如今关注还送某网精品视频课程网盘资料啊，准能为你节省很多钱！