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. 为Apple Push开发的PHP PEAR 包:Services_Apple_PushNotification

    Apple Push Notification Service:通过苹果服务器向app用户推送消息,无需启动app. 苹果官方文档:http://developer.apple.com/library ...

  2. C# 泛型的协变和逆变

    1. 可变性的类型:协变性和逆变性 可变性是以一种类型安全的方式,将一个对象当做另一个对象来使用.如果不能将一个类型替换为另一个类型,那么这个类型就称之为:不变量.协变和逆变是两个相互对立的概念: 如 ...

  3. Wrangle – 响应式的,触摸友好的多选插件

    Wrangle 是一个响应式,触摸友好的选择插件,支持 jQuery 以及 Zepto.Wrangle 为多项选择提供了一个独特的方法:通过画一条贯穿项目的线条来选择项目.它给你的应用程序的一种新的方 ...

  4. [deviceone开发]-打开新页动画效果

    一.简介 do_App的openPage支持16种过场动画,这个示例直观的展示16种动画的效果.适合初学者. 二.效果图 三.相关下载 https://github.com/do-project/co ...

  5. swift学习笔记之-协议

    //协议(Protocols) import UIKit /*协议(Protocols) 1.协议定义了一个蓝图,规定了用来实现某一特定任务或者功能的方法.属性,以及其他需要的东西 2.类.结构体或枚 ...

  6. 百度的echart环形图颜色动态设置

    自己参与的有一个项目需要用到环行图,考虑到百度的echart功能很强大兼容性又挺好就使用了这个插件,但是在颜色配置的时候出现了问题按照参考文档的方法是用color:Array这样的形式,但是不知道在哪 ...

  7. 客户端调用服务端webservice的端口问题

    今天有一个同事过来问:他有一个程序在A服务器上调第三方B服务器短信发送服务接口(webservice),无论是否发送成功,服务接口都会返回状态.现在客户要做每一个服务器 做入站端口管控,一切不必要的端 ...

  8. YYText-显示富文本

    github地址: https://github.com/ibireme/YYText CocoaPods安装: pod 'YYText' 1.YYLabel使用注意 private lazy var ...

  9. Android图表类库:WilliamChart

    WilliamChart是基于Views的Android图表类库,帮助开发者在Android应用中实现折线图.柱状图和堆叠柱状图.数值发生变化时图表也会以动画的效果发生变化. At the momen ...

  10. 免费真机调试 -- Xcode7

    刚新安装了Xcode7 Version 7.1 beta , 据说这个版本可以免费真机调试,于是用了一个新的AppID测试了,发现真的可以免费真机调试了呢!新的appId账号,没有支付每年的99美刀, ...