以前需要用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. 11条javascript知识

    1.局部变量和全局变量 var操作符定义的变量将成为定义该变量作用域中的局部变量.这个局部变量会在函数退出后销毁.不同于其他语言,javaScript不存在块级作用域. 全局变量就是window对象的 ...

  2. Azure开发者任务之六：使用WCF Service Web Role

    在本文中,我们将会在local development fabric上创建一个WCF服务角色,然后在一个控制台应用程序中使用它. WCF服务角色可以让我们创建一个WCF服务,并且把它托管在Window ...

  3. ACM训练场

    http://acm.nyist.net/JudgeOnline/problemset.php http://blog.csdn.net/SJF0115/article/category/910592 ...

  4. QR二维码生成器源码（中间可插入小图片）

    二维码终于火了,现在大街小巷大小商品广告上的二维码标签都随处可见,而且大都不是简单的纯二维码,而是中间有个性图标的二维码. 我之前做了一个使用google开源项目zxing实现二维码.一维码编码解码的 ...

  5. jquery.cookie.js 用法

    jquery.cookie.js 用法   一个轻量级的cookie 插件,可以读取.写入.删除 cookie. jquery.cookie.js 的配置 首先包含jQuery的库文件,在后面包含 j ...

  6. ASP.NET Web API 通过Authentication特性来实现身份认证

    using System; using System.Collections.Generic; using System.Net.Http.Headers; using System.Security ...

  7. 【翻译】Netscaler真实表现性能调整

    源地址:https://msandbu.wordpress.com/2014/10/31/netscaler-and-real-performance-tuning/ 作者显然不是以英语为母语的,所以 ...

  8. HTML 块元素

    分为3类 1. 结构块 只能包含块级元素.它们包含结构含义,但没有语义含义,也就是,不能说明内容是什么,只能说明其组织方式. <ol> <ul> <dl> < ...

  9. 淡扯javascript编程思想

    一.面向对象-OOD   虽然js面向对象的编程思想已经老话常谈了,但了为了文章的完整性,我还是把它加了进来,尽量以不太一样的方式讲述(虽然也没什么卵不一样的). 1.面向对象,首先得有类的概念,没有 ...

  10. Microsoft SQL Server，附加数据库 错误:Error 916解决方法

    错误信息:错误提示:标题: Microsoft SQL Server Management Studio Express ——————————  无法为此请求检索数据. (Microsoft.SqlS ...