标签实现提示功能

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chenlinwei5/article/details/54428573

<datalist>标签作为HTML5中的新标签,实现定义选项列表,这个标签在使用的时候配合<input>标签来使用,可以实现类似百度搜素框一样的搜素提示功能。(*@ο@*) 哇~


<datalist>跟<select>标签类似,同样作为选项列表的它们都需要借助<option>标签来实现选项列表的每一项的内容。


通过一个<input>标签模拟一个输入框(如:<input type="text" list="year"/>),在input标签中添加了一个list属性,这个属性的值起到匹配选项列表的功能,如果没有这个属性值,浏览器将没法匹配到相应的内容。


具体实现——在<datalist>标签中添加一个id属性,这个id属性就是list 的属性值,当两个值相同时这两个标签就实现了功能的结合。

接下来,需要我们自己为option属性值添加内容(这里添加的是提示内容),然后在<input>标签产生的文本框中输入内容,浏览器就会在选项列表中将类似的内容的选项提示出来。~\(≧▽≦)/~

示范代码:

<input type="text" list="year"/>
<datalist id="year">
<option value="Adidas"></option>
<option value="Baidu"></option>
<option value="Cctv"></option>
<option value="Dreamweaver"></option>
<option value="Eclipse"></option>
</datalist>

展开阅读全文

没有更多推荐了,返回首页