Chinaunix首页 | 论坛 | 博客
  • 博客访问: 264865
  • 博文数量: 76
  • 博客积分: 66
  • 博客等级: 民兵
  • 技术积分: 980
  • 用 户 组: 普通用户
  • 注册时间: 2012-10-28 16:48
个人简介

做游戏 写程序 Erlang分布式

文章分类

全部博文(76)

文章存档

2017年(3)

2016年(2)

2015年(1)

2014年(5)

2013年(20)

2012年(45)

我的朋友

分类:

2012-10-28 16:56:20

注:在其它的一些教程或资料中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,自动补全,W3Cfuns

html5,datalist,自动补全,W3Cfuns
此效果非HTML5的datalist技术实现



datalist案例:


点击(此处)折叠或打开

  1. <input list="w3cfuns-search" />
  2.     <datalist id="w3cfuns-search">
  3.             <option value="W3Cfuns">
  4.             <option value="W3C标准">
  5.             <option value="W3C规则">
  6.             <option value="W3C验证">
  7.             <option value="前端开发">
  8.             <option value="前端开发网">
  9.             <option value="2天驾驭DIV+CSS">
  10.             <option value="W3CSchool">
  11.     </datalist>

Powered by

datalist说明:
个人认为称呼datalist为自动补全列表更加合适,因为它并不是下拉列表。
阅读(727) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~