UDN-企业互联网技术人气社区

板块导航

浏览  : 1558
回复  : 1

[HTML5] HTML5之datalist标签自动补全的使用

[复制链接]
友美C_cup的头像 楼主
本帖最后由 友美C_cup 于 2015-8-7 11:25 编辑

  注:在其它的一些教程或资料中datalist标签称为下拉列表,我认为这种叫法不够准确,而且不能一下子理解此标签。比如前段时间:“一个朋友问我datalist是不是一种能自定义样式的select?”,后来才知道,有些书籍或教程中称为下拉列表而导致初学者理解错。那么此标签怎么称呼它才合适呢?咱们看完下面的案例后,我再说明:

     datalist标签:
     datalist介绍:

     datalist一般不会独行江湖,它需要与input标签的搭配使用,就像label标签与input标签搭配使用一样。既然与input标签搭配使用,那么这两个标签之间必定存在着“特殊的关系”,不然input与datalist就互不相认了,那么如何才能让他们建立起来这种关系呢?这个时候我们需要一个新的属性list(注意,不是for),list与for的用法一样,list的值设置为表单元素的 id,这样他们便会自动关联了。

     Chrome对此标签支持不好,Firefox和Opera可很好的支持

     datalist作用:

    我们经常在网上的搜索框中看到当输入一个字符,输入框下方会自动列出你输入的关键词,比如Google或百度的搜索

     此效果非HTML5的datalist技术实现

     datalist案例:

  1. <p style="line-height: 30px; text-indent: 2em;">
  2. <input list="w3cfuns-search" />
  3. <datalist id="w3cfuns-search">
  4.         <option value="W3Cfuns">
  5.         <option value="W3C标准">
  6.         <option value="W3C规则">
  7.         <option value="W3C验证">
  8.         <option value="前端开发">
  9.         <option value="前端开发网">
  10.         <option value="2天驾驭DIV+CSS">
  11.         <option value="W3CSchool">
  12. </datalist></p>
复制代码






相关帖子

发表于 2015-9-17 15:19:12 | 显示全部楼层
LZ敢整点更有创意的不?兄弟们等着围观捏~
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部