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自动完成的更多相关文章

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"> ...

随机推荐

ubuntu15.10_x64 安装 nginx
浏览器到 http://nginx.org/en/download.html 下载 stable version的nginx 如nginx-1.10.1.tar.gz,这是一个nginx源码包,需 ...
jQuery Filterizr 筛选过滤
Filterizr 是一款功能强大的筛选过滤插件,它提供了多重筛选过滤方式,配合了css3的动画效果. 在线实例默认回调函数使用方法 <div class="sucaihuo&q ...
Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》
<Web 开发最有用的50款 jQuery 插件集锦>系列文章向大家分享最具创新的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插 ...
C++11新特性 lambda表达式
C++11 添加了了一个名为lambda表达式的功能,可以用于添加匿名函数语法: [capture_block](parameter) mutable exception_specification ...
wydomain
目标系统信息收集组件,完全模块化,脚本均可拆可并.可合可分的使用! 运行流程利用FOFA插件获取兄弟域名,并透视获取到的子域名相关二级域名.IP信息检查域名和兄弟域名是否存在域传送漏洞,存在就遍历 ...
10本Java经典书目推荐
本文列出的10本书是我个人非常喜欢的Java书籍,当我有时间的时候,我就会将它们捧在手里阅读.甚至有些书我反复读过很多遍,每次重新读的时候总会有新的收获.因此这些书也是大部分Java程序员喜欢的书籍. ...
Android属性之build.prop生成过程分析
Android的build.prop文件是在Android编译时刻收集的各种property(LCD density/语言/编译时间, etc.),编译完成之后,文件生成在out/target/pro ...
Android 利用内容观察者实现短信窃听
<Android 内容观察者的原理>中介绍了内容观察者的一些基本原理,并做了简单的实战,本文接着进一步做一个小项目实战 package com.wuyudong.smslistener; ...
1. 从系统架构到Hello World
Android起源与发展: Android操作系统最初在2003年的时候由Andy Rubin开发,主要支持手机.2005年8月由Google收购注资.2007年11月,Google与84家硬件制造商 ...

html5 datalist自动完成