本文教你如何仅使用HTML创建自动完成输入,选择你心中的女神。
datalist(数据列表)元素
要实现这个功能,首先要创建一个标签和输入框。
你的女神是谁?
接下来,创建一个datalist列表元素。
在其中,为每个自动完成的选择添加一个 option 元素。使用上面的示例,我们将为每个女神创建一个选项。
你的女神是谁?关晓彤柳岩王鸥鬼鬼潘晓婷
最后,我们需要将 datalist 与 input 关联。
为 datalist 提供一个ID,并将 list 属性添加到您的输入中,其值等于您的datalist ID。
你的女神是谁?关晓彤柳岩王鸥鬼鬼潘晓婷
现在,当用户键入内容时,浏览器将显示一个可供选择的选项列表。
浏览器兼容性
datalist元素可在所有现代浏览器中使用
感谢您的阅读。程序员,你的女神是谁呢?
如果对你有所启发和帮助,可以点个关注、收藏。
作者简介:做工程不做码农(微信公众号同名),Web前端工程师,聚焦大前端技术和程序员成长的公众号。
#HTML5#