小技巧系列
本文教你如何仅使用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元素可在所有现代浏览器中使用
阅读后如果觉得对您有帮助，可以关注作者、收藏、转发，这是对作者写出优质文章最大的鼓励了。
聚焦大前端技术和成长的公众号
关注我的公众号，第一时间接收原创、精选干货文章
