以前需要用JS写一个自动完成组件（Suggest），很费劲。HTML5时代则不用了，直接使用datalist标签，直接减少了工作量。如下

<!DOCTYPE html>

<html>

 <head>

	<title>HTML5 datalist tag</title>

	<meta charset="utf-8">

 </head>

    <p>

        浏览器版本：<input list="words">

    </p>

    <datalist id="words">

        <option value="Internet Explorer">

        <option value="Firefox">

        <option value="Chrome">

        <option value="Opera">

        <option value="Safari">

        <option value="Sogou">

        <option value="Maxthon">

    </datalist>

 </body>

</html>

datalist提供一个事先定义好的列表，通过id与input关联，当在input内输入时就会有自动完成（autocomplete）的功能，用户将会看见一个下拉列表供其选择。

效果如下

Chrome/Firefox/Opera和IE10+均已支持，Safari直到版本7仍然不支持。

相关：

https://developer.mozilla.org/en/docs/Web/HTML/Element/datalist

http://caniuse.com/datalist

HTML5 datalist 标签的更多相关文章

  1. 【HTML5】<datalist>标签和<select>标签的比较

    <select>标签: 注:该标签定义了下拉列表的实现 <select name = "location"> <option value = &quo ...

  2. 让ie浏览器支持html5新标签的解决方法(使用html5shiv)

    没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...

  3. html5新标签转

    HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务(p ...

  4. Html5新标签解释及用法

    Html5新标签解释及用法 HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要 ...

  5. Html5新标签及用法

    HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2  HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务( ...

  6. 让IE6,7,8支持HTML5新标签的方法

    很多网站对网页进行重构的时候,提高标签的语义性,在网页中大量使用了section,article,header等HTML5新标签.考虑到目前win7自带的IE浏览器版本是IE8,而IE8不支持HTML ...

  7. HTML5新标签

    <article>标签定义外部的内容.比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本.亦或是来自其他外部源内容. HTML5:<arti ...

  8. 盒子模型，定位技术，负边距，html5 新增标签

    盒子模型 /*[margin 外边距] margin属性最多四个 1.只写一个值,四个方向的margin均为这个值 2.写两个值:上,右两个方向,下默认=上,右 默认=左 3.写三个值:上.右.下三个 ...

  9. datalist标签小结

    在Web设计中,经常会用到如输入框的自动下拉提示,这将大大方便用户的输入.在以前,如果要实现这样的功能,必须要求开发者使用一些Javascript的技巧或相关的框架进行ajax调用,需要一定的编程工作 ...

随机推荐

  1. .Net 配置文件--继承ConfigurationSection实现自定义处理类处理自定义配置节点

    除了使用继承IConfigurationSectionHandler的方法定义处理自定义节点的类,还可以通过继承ConfigurationSection类实现同样效果. 首先说下.Net配置文件中一个 ...

  2. C# ICSharpCode.SharpZipLib.dll文件压缩和解压功能类整理，上传文件或下载文件很常用

    工作中我们很多时候需要进行对文件进行压缩,比较通用的压缩的dll就是ICSharpCode.SharpZipLib.dll,废话不多了,网上也有很多的资料,我将其最常用的两个函数整理了一下,提供了一个 ...

  3. 一、MyBatis简介与配置MyBatis+Spring+MySql

    //备注:该博客引自:http://limingnihao.iteye.com/blog/106076 1.1MyBatis简介 MyBatis 是一个可以自定义SQL.存储过程和高级映射的持久层框架 ...

  4. Hibernate中的脏检查和缓存清理机制

    脏检查 Session到底是如何进行脏检查的呢?当一个Customer对象被加入到Session缓存中时,Session会为Customer对象的值类型的属性复制一份快照.当Session清理缓存时, ...

  5. 动态创建JS

    var element=document.createElement('script'); element.setAttribute('src', './js/move.js'); document. ...

  6. K3Cloud开放数据模型

          金蝶K/3 Cloud是基于WEB2.0与云技术的一个开放式.社会化的新时代企业管理服务平台.整个产品采用SOA架构,完全基于BOS平台组建而成,业务架构上贯穿流程驱动与角色驱动思想,结合 ...

  7. Upgrading or Redeploying SharePoint 2010 Workflows

    While creating several State Machine SharePoint 2010 workflows using visual studio for a client I ha ...

  8. Windows 下Apace tomcat

    java JDK安装: 1. 官方www.oracle.com 下载jdk 2. 环境变量配置 (1)新建->变量名:JAVA_HOME变量值:C:\Program Files (x86)\Ja ...

  9. 我在用的mac软件(1)--终端环境之iTerm2

    之前一直有朋友要我分享下在用的mac软件,今天有空就来写一下,可能不止于软件,会有一些配置或者工具,或者叫环境更合适.有些可能一句话带过,有些会详细介绍.也不分类了,想到哪个就写出来.如果已经写的足够 ...

  10. BeanFactory not initialized or already closed - call 'refresh' before accessing beans解决办法

    今天在写Spring程序时遇到了一个很常见的错误,而我以前好像一直没碰到过,今天才见到这个错误,经过研究解决了这个错误,犯这个错误真是不应该啊. log4j:WARN No appenders cou ...