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

随机推荐

ConcurrentHashMap原理分析
当我们享受着jdk带来的便利时同样承受它带来的不幸恶果.通过分析Hashtable就知道,synchronized是针对整张Hash表的,即每次锁住整张表让线程独占,安全的背后是巨大的浪费,而现在的解 ...
Volatile实现原理
volatile 在多线程上volatile 是synchronized 轻量级实现.在多核处理器开发中保证了共享变量的"可见性".可见性是指当一个线程修改一个共享变量的时候,另外 ...
20款时尚的 WordPress 简洁主题【免费下载】
在这篇文章中,我们收集了20款时尚的 WordPress 简洁模板.WordPress 是最流行的博客系统,插件众多,易于扩充功能.安装和使用都非常方便,而且有许多第三方开发的免费模板,安装方式简单易 ...
第三届“HTML5峰会”变身“iWeb峰会”8月来袭
第三届“HTML5峰会”——2000人规模的“iWeb峰会”将于8月16日在北京召开.本次大会由HTML5梦工场主办,是在前两届“HTML5峰会”基础上的延伸和升华. 三年以来,HTML5梦工场致力于 ...
HTML5基础之textarea 和lable
HTML基础:表单<form/>中文本域textarea 和lable <textarea rows="行数" cols="列数">文本 ...
Location对象、History对象
Location对象: Window对象的location属性引用的是Location对象,它表示窗口中当前显示的内容的URL,Document对象的location属性也引用Location对象,w ...
HTML中tr标签设置边框不显示的解决办法
今天在操作表格的时候发现设置表格中行的边框没有显示,然后自己新建了一个表格发现确实不显示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...
C# 操作PPt，去掉文本框的边框
using System; using System.Collections.Generic; using System.Linq; using System.Text; using OFFICECO ...
部署基于国际版Azure的SharePoint三层架构服务器场
前言微软Azure国际版已经很普及了,这里没有用国内版(世纪互联),用的是国际版,当然是由于公司性质的缘故.这里一步步图文的方式,分享给大家创建Azure国际版的SharePoint三层架构的过程, ...
SharePoint 2013 数据库中手动更新用户信息
在SharePoint的使用过程中,尤其是Windows认证的情况下,而且没有配置用户配置文件服务,经常会出现如果更新AD中的用户信息(包括名字.显示名.邮件等),SharePoint这边站点并不会更 ...

html5 datalist自动完成