·您当前的位置:首页 > 技术教程 > PHP教程 >

[html5]HTML5新标签datalist用法例子

时间:2017-09-29 17:13酷播
以前需要用JS写一个自动完成组件(Suggest),很费劲。HTML5时代则不用了,直接使用datalist标签,直接减少了工作量

以前需要用JS写一个自动完成组件(Suggest),很费劲。HTML5时代则不用了,直接使用datalist标签,直接减少了工作量。如下

  1. <!DOCTYPE html> 
  2. <html> 
  3.  <head> 
  4.     <title>HTML5 datalist tag</title> 
  5.     <meta charset="utf-8"> 
  6.  </head> 
  7.     <p> 
  8.         浏览器版本:<input list="words"> 
  9.     </p> 
  10.     <datalist id="words"> 
  11.         <option value="Internet Explorer"> 
  12.         <option value="Firefox"> 
  13.         <option value="Chrome"> 
  14.         <option value="Opera"> 
  15.         <option value="Safari"> 
  16.         <option value="Sogou"> 
  17.         <option value="Maxthon"> 
  18.     </datalist> 
  19.  </body> 
  20. </html> 

datalist提供一个事先定义好的列表,通过id与input关联,当在input内输入时就会有自动完成(autocomplete)的功能,用户将会看见一个下拉列表供其选择。

效果如下

Chrome/Firefox/Opera和IE10+均已支持,Safari直到版本7仍然不支持。

相关:http://www.cnblogs.com/snandy/p/3575203.html

https://developer.mozilla.org/en/docs/Web/HTML/Element/datalist

http://caniuse.com/datalist

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器