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"> ...
随机推荐
- 为Apple Push开发的PHP PEAR 包:Services_Apple_PushNotification
Apple Push Notification Service:通过苹果服务器向app用户推送消息,无需启动app. 苹果官方文档:http://developer.apple.com/library ...
- C# 泛型的协变和逆变
1. 可变性的类型:协变性和逆变性 可变性是以一种类型安全的方式,将一个对象当做另一个对象来使用.如果不能将一个类型替换为另一个类型,那么这个类型就称之为:不变量.协变和逆变是两个相互对立的概念: 如 ...
- Wrangle – 响应式的,触摸友好的多选插件
Wrangle 是一个响应式,触摸友好的选择插件,支持 jQuery 以及 Zepto.Wrangle 为多项选择提供了一个独特的方法:通过画一条贯穿项目的线条来选择项目.它给你的应用程序的一种新的方 ...
- [deviceone开发]-打开新页动画效果
一.简介 do_App的openPage支持16种过场动画,这个示例直观的展示16种动画的效果.适合初学者. 二.效果图 三.相关下载 https://github.com/do-project/co ...
- swift学习笔记之-协议
//协议(Protocols) import UIKit /*协议(Protocols) 1.协议定义了一个蓝图,规定了用来实现某一特定任务或者功能的方法.属性,以及其他需要的东西 2.类.结构体或枚 ...
- 百度的echart环形图颜色动态设置
自己参与的有一个项目需要用到环行图,考虑到百度的echart功能很强大兼容性又挺好就使用了这个插件,但是在颜色配置的时候出现了问题按照参考文档的方法是用color:Array这样的形式,但是不知道在哪 ...
- 客户端调用服务端webservice的端口问题
今天有一个同事过来问:他有一个程序在A服务器上调第三方B服务器短信发送服务接口(webservice),无论是否发送成功,服务接口都会返回状态.现在客户要做每一个服务器 做入站端口管控,一切不必要的端 ...
- YYText-显示富文本
github地址: https://github.com/ibireme/YYText CocoaPods安装: pod 'YYText' 1.YYLabel使用注意 private lazy var ...
- Android图表类库:WilliamChart
WilliamChart是基于Views的Android图表类库,帮助开发者在Android应用中实现折线图.柱状图和堆叠柱状图.数值发生变化时图表也会以动画的效果发生变化. At the momen ...
- 免费真机调试 -- Xcode7
刚新安装了Xcode7 Version 7.1 beta , 据说这个版本可以免费真机调试,于是用了一个新的AppID测试了,发现真的可以免费真机调试了呢!新的appId账号,没有支付每年的99美刀, ...