1、传统输入框

<label for="favorite_team">Favorite Team:</label>
<input type="text" name="team" id="favorite_team" />

2、使用datalist

给input增加一个list属性,属性值为datalist的id值。

双击input或者输入一个匹配的首字母的时候可以提供选项让用户选择。

<label for="favorite_team">Favorite Team:</label>
<input type="text" name="team" id="favorite_team" list="team_list" />
<datalist id="team_list">
<option>Detroit Lions</option>
<option>Detroit Pistons</option>
<option>Detroit Red Wings</option>
<option>Detroit Tigers</option>
<!-- etc... -->
</datalist>

有一点要注意:可以给datalist中的option指定value值,但是指定value值后,用户通过下拉列表选择后,文本框中将显示value值。

3、何时使用?

选择不太多的场景下,使用一般的下拉就可以了。

如果需要用户在很多数据中去选择,则可以建议使用datalist下拉建议提示框,因为可以方便用户快速检索去选择。

一个典型的场景就是对世界各个国家的选择。

4、浏览器不支持怎么处理?

点我查看浏览器支持。

IE10+,Firefox 4+,Chrome 20+和Opera是支持datalist的,对于不支持的浏览器,可以优雅降级。

1)datalist中嵌套使用传统的select下拉选择框

在提供传统的select下拉文本框的同时,提供给用户能输入普通文本的文本框。

<body >
<label for="country">Country:</label>
<datalist id="country_list">
<select name="country">
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<!-- more -->
</select>
If other, please specify:
</datalist>
<input type="text" name="country" id="country" list="country_list">
</body>

上面代码,在datalist中嵌套了传统的select下拉文本框,而input文本框依然绑定了datalist,这样的好处是,当在不支持datalist的浏览器中运行时,一边是下拉选择,另外还可以允许用户输入下拉列表中不存在的记录。

如果在支持datalist的浏览器中运行,则是原来的只显示一个datalist效果。

2)使用jquery ui中的autocompute插件

不多说。

5、使用datalist的限制

  • 不能使用css去随意控制或改变其下拉建议列表中的项
  • 不能控制datalist的位置
  • 不能控制每次当用户输入多少个字符后,就出现下拉建议列表
  • 不能将其与服务器的数据绑定

6、资源链接

http://developer.51cto.com/art/201306/400342_all.htm

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

http://caniuse.com/datalist

html5 datalist自动完成的更多相关文章

  1. HTML5 datalist 标签

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

  2. HTML5 datalist实现suggest功能

    1.例子 <!DOCTYPE html> <html> <head> <title>HTML5 datalist tag</title> & ...

  3. html5 datalist 选中option选项后的触发事件

    使用input + datalist 实现自动补全功能,其中datalist中的内容是根据input输入的内容动态变换的,代码如下 <!DOCTYPE HTML> <html> ...

  4. html5 datalist

    教程:http://www.w3school.com.cn/html5/html5_datalist.asp 提供自动完成的文本框

  5. HTML5 SSE自动推送

    前端页面: <!doctype html> <html> <head> <meta charset="UTF-8"> <tit ...

  6. DataList:HTML5中的input输入框自动提示宝器

    DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果.它是HTML5里新 ...

  7. HTML 表单 / HTML5 表单元素datalist

    <form> 属性的列表: 属性 描述 accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集). action 规定向何处提交表单的地址(URL)(提交页面). ...

  8. 三天学会HTML5 之第一天

    引言 HTML5 一直是非常热门的话题,因此此系列文章主要从一些基本功能开始讲起,逐步深入了解HTML5的新概念. 首先了解一些基本的术语和概念. SGML, HTML,XML三者之间的区别 Doc类 ...

  9. 《HTML5与CSS3基础教程》学习笔记 ——Four Day

    第十六章 1.    输入和元素 电子邮件框 <input type="email"> 搜索框 <input type="search"> ...

随机推荐

  1. CSS3 使用自定义字体

    CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体.通过 CSS3,web 设计师可以使用他们喜欢的任意字体.当您您找到或购买到希望使用的字体 ...

  2. VS2010在64位系统中连接64位Oracle出现的问题和解决方法

    C#使用System.Data.OracleClient连接Oracle数据库.我的是window7/64位系统,装了一个64位的oralce 11G r2 客户端是64位的 用VS10调试错误信息如 ...

  3. 全信号高清DVI编码器|上海视涛科技

    高清DVI编码器(E700)简介 高清DVI编码器是上海视涛科技出品的高性能全信号DVI编码产品.该DVI编码器是上海视涛科技完全自主研发,并适用于DVI信号的编码采集及网络传输的专用硬件设备.可兼容 ...

  4. Creating Custom Connector Sending Claims with SharePoint 2013

    from:http://blogs.msdn.com/b/security_trimming_in_sharepoint_2013/archive/2012/10/29/creating-custom ...

  5. Sharepoint学习笔记—习题系列--70-576习题解析 -(Q4-Q5)

    Question 4 You are designing a SharePoint 2010 application to store 50 GB of digital assets, includi ...

  6. word第二讲(0806)

    word里的长度单位 绝对长度单位(厘米,英寸) 相对长度单位(字符,像素) 样式 问题: 如何设置多个部分的格式 多次选择,多次设置 多次选择,一次设置 应用格式刷(ctrl+shift+c,ctr ...

  7. Android--ListView下拉刷新

    整理了下以前写的小项目,ListView的下拉刷新,虽然小但还是想纪念下..适合新手看,大神略过... 效果图:     代码:  实体类 package com.example.listviewre ...

  8. objective-c系列-@Property&点语法

    //解释 property后边的圆括号中的修饰词的含义: //          nonatomic  非线程安全  非原子操作  特点是: 操作变量的效率高 //          atomic   ...

  9. 深入浅出Block的方方面面

    内容大纲: 1.Blocks概要 2.Blocks模式 3.Block实质(面试常问重点) 1.Blocks概要 什么是Blocks:Blocks是C语言的扩充的功能,可以用一句话来表示Blocks的 ...

  10. js获取url

    location.href 返回完整的url location.origin  返回带协议的主机域名  如http://www.test.com location.pathname  返回url中路径 ...