如何实现input元素与datalist元素的数据绑定?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何实现input元素与datalist元素的数据绑定?相关的知识,希望对你有一定的参考价值。

参考技术A 这边网上找了个示例代码,请保存为.html测试
<html>
<body>
<input list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
</body>
</html>
参考技术B 河南新华电脑学院,专注互联网教育三十二年,到校参观报销路费 免费试听课程!!

输入框下拉菜单

<datalist>

<datalist>是HTML5的新标签,它规定了<input>元素可能的选项列表。

<datalist>标签被用来在为元素提供"自动完成"的特性。用户能看到一个下拉列表,里边的选项是预先定义好的,将作为用户的输入数据。

编程实现


代码如图:

技术分享

效果如图:

 

技术分享

以上是关于如何实现input元素与datalist元素的数据绑定?的主要内容,如果未能解决你的问题,请参考以下文章

html5 datalist 单击事件

html5怎么datalist加载时不显示全部值

输入框下拉菜单

html datalist for contenteditable(非输入标签)

HTML5中的新增功能

HTML5 表单新增内容