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. js自调用匿名函数的三种写法

    第一种: (function(){ console.log(‘hello world”) })() 第二种: (function(){ console.log(‘hello world’) }()) ...

  2. 系统安装LOL等游戏后出现VS调试报错"无法调试""拒绝访问"之类的调试错误

    一个问题抠得脑壳痛,度娘一番各种各样的答案.基本属于 1,调试权限被清0 2,文件权限问题   其中看到很多解决方案中提到"重启电脑"的说法.我也试了几次不行甚至游戏都卸载了.后来 ...

  3. 详细解读XMLHttpRequest（一）同步请求和异步请求

    本文主要参考:MDN XMLHttpRequest 让发送一个HTTP请求变得非常容易.你只需要简单的创建一个请求对象实例,打开一个URL,然后发送这个请求.当传输完毕后,结果的HTTP状态以及返回的 ...

  4. oracle表的管理

    表名和列的命名规则 必须以字母开头: 长度不能超过30字符: 不能使用oracle的保留字: 只能使用如下字符:A-Z,a-z,0-9,$,#等:   数据类型: 字符型: char       定长 ...

  5. 安装 Ubuntu 后的个人常用配置

    在 ASA 猪队友的带领下,拥抱开源世界,用上了Ubuntu.资深强迫症现身说法,配置符合自己使用习惯的Ubuntu. 1. 窗口标题栏显示菜单项 打开系统设置->外观->行为,在[显示窗 ...

  6. 关于WPF中文件夹浏览对话框的方式

    文件夹浏览时dialogresult要写全引用路径 string path=null; FolderBrowserDialog fbd = new FolderBrowserDialog(); fbd ...

  7. 27款后台管理页面设计 DIV+CSS+JS

    -----------. 演示: http://www.websjy.com/club/websj ... _61040268/index.htm http://www.websjy.com/club ...

  8. Kafka主要参数详解（转）

    原文档地址:http://kafka.apache.org/documentation.html ############################# System ############## ...

  9. -[__NSCFDictionary setObject:forKey:]: mutating method sent to immutable object' 解决方法

    -[__NSCFDictionary setObject:forKey:]: mutating method sent to immutable object' 解决方法: 错误:NSMutableD ...

  10. JavaScript小例子：复选框全选

    JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...