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元素可在所有现代浏览器中使用
关注公众号，第一时间接收最新文章。如果对你有一点点帮助，可以点喜欢点赞点收藏，还可以小额打赏作者，以鼓励作者写出更多更好的文章
现在关注还送某网精品视频课程网盘资料啊，准能为你节省不少钱！
