html5 datalist自动完成
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
html5 datalist自动完成的更多相关文章
- HTML5 datalist 标签
以前需要用JS写一个自动完成组件(Suggest),很费劲.HTML5时代则不用了,直接使用datalist标签,直接减少了工作量.如下 <!DOCTYPE html> <html& ...
- HTML5 datalist实现suggest功能
1.例子 <!DOCTYPE html> <html> <head> <title>HTML5 datalist tag</title> & ...
- html5 datalist 选中option选项后的触发事件
使用input + datalist 实现自动补全功能,其中datalist中的内容是根据input输入的内容动态变换的,代码如下 <!DOCTYPE HTML> <html> ...
- html5 datalist
教程:http://www.w3school.com.cn/html5/html5_datalist.asp 提供自动完成的文本框
- HTML5 SSE自动推送
前端页面: <!doctype html> <html> <head> <meta charset="UTF-8"> <tit ...
- DataList：HTML5中的input输入框自动提示宝器
DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果.它是HTML5里新 ...
- HTML 表单 / HTML5 表单元素datalist
<form> 属性的列表: 属性 描述 accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集). action 规定向何处提交表单的地址(URL)(提交页面). ...
- 三天学会HTML5 之第一天
引言 HTML5 一直是非常热门的话题,因此此系列文章主要从一些基本功能开始讲起,逐步深入了解HTML5的新概念. 首先了解一些基本的术语和概念. SGML, HTML,XML三者之间的区别 Doc类 ...
- 《HTML5与CSS3基础教程》学习笔记 ——Four Day
第十六章 1. 输入和元素 电子邮件框 <input type="email"> 搜索框 <input type="search"> ...
随机推荐
- 【自然框架】终于把源码弄到git上了。
好久没写博客了,发现又从左面的排名里掉出去了. 说来惭愧,一直说是开源,但是源码一直没能放到git里面.原因是,不会用. 最近终于把git弄明白了.把源码都放进去了. 刚兴趣的话可以来看看. http ...
- jQuery10种不同动画效果的响应式全屏遮罩层
遮罩层有很多今天介绍这个jQuery10种不同动画效果的响应式全屏遮罩层 效果预览 下载地址 实例代码 <div class="container"> <head ...
- 如何在没有安装微软Excel环境下操作Excel文件？
在以前接触的项目中,由于很多客户对微软Excel的操作比较熟练,客户经常要求系统支持对Excel文件的读写.用.NET传统方法对Excel进行读写时,往往会涉及到不同版本兼容的问题,导致在本地测试一切 ...
- Hello.js – Web 服务授权的 JavaScript SDK
Hello.js 是一个客户端的 Javascript SDK,用于实现 OAuth2 认证(或者基于 OAuth 代理实现的 OAuth1)的 Web 服务和查询 REST API. HelloJS ...
- 通过ABAP的标准功能，寻找源代码中的字符串
程序名称: *ABAP_SOURCE_SCAN 查找 作用:通过这个标准程序,可以在系统的源代码中进行字符串的查找!
- 如何设置'REUSE_ALV_GRID_DISPLAY'的单个单元格的颜色
REPORT ydemo_rick_a . TYPE-POOLS: slis. , carrid LIKE sflight-carrid, connid LIKE sflight-connid, fl ...
- 如何：对 SharePoint 列表项隐藏 ECB 中的菜单项
可以通过使用功能框架向编辑控制块 (ECB) 菜单添加新的自定义操作.但是,您不能使用此方法进行相反的操作,即隐藏现有的 ECB 菜单项,因为它们是通过使用 ECMAScript(JavaScript ...
- iOS音频开发之`AudioStreamBasicDescription`
这个类提供了对于音频文件的描述 An audio stream is a continuous series of data that represents a sound, such as a so ...
- Android 系统API实现数据库的增删改查和SQLite3工具的使用
在<Android SQL语句实现数据库的增删改查>中介绍了使用sql语句来实现数据库的增删改查操作,本文介绍Android 系统API实现数据库的增删改查和SQLite3工具的使用. 系 ...
- Java中的两个关键字——super、this
Java中的两个关键字——super.this 神话丿小王子的博客主页 一.super super 是java中方的一个关键字,用它可以引用父类中的成员: super可用于访问父类中定义的属性 sup ...