以前需要用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. 移动前端页面与Chrome的远程真机调试

    一年不见,博客园都长草啦...... 前几日刚入手新手机小米5,系统真心流畅呀.为啥要买小米5呢,因为要提高生产力呀,好好玩移动前端开发呀哈哈哈 那么问题来了,要怎么调试手机上的前端页面呢? 很久很久 ...

  2. dp - Codeforces Round #313 (Div. 1) C. Gerald and Giant Chess

    Gerald and Giant Chess Problem's Link: http://codeforces.com/contest/559/problem/C Mean: 一个n*m的网格,让你 ...

  3. 怎样用C#代码屏蔽任务管理器？

    这是我在网上找的并多加了一些我自己需要的代码,经过我的测试,可以屏蔽任务管理器,但还有一些瑕疵. 首先,我在vs2012中新建一个项目,选择window下的window窗体应用程序,把窗体form1拉 ...

  4. win7局域网里输入正确密码也访问不了其他的机器

    1.本地安全策略-本地策略-安全选项-网络安全:LAN管理器身份验证级别,默认是“没有定义”,更改为“发送LM和NTLM响应! Windows 7系统自带的是一个统安全管理工具--本地安全策略,它可以 ...

  5. Python科学计算——前期准备

    1.开发环境搭建 Python(英国发音:/ˈpaɪθən/ 美国发音:/ˈpaɪθɑːn/), 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年发明,第一个公 ...

  6. 探索HashMap实现原理及其在jdk8数据结构的改进

    因为网上已经太多的关于HashMap的相关文章了,为了避免大量重复,又由于网上关于java8的HashMap的相关文章比较少,至少我没有找到比较详细的.所以才有了本文. 本文主要的内容: 1.Hash ...

  7. ASP.NET Web API获取Model元数据

    using System; using System.Web.Http; using Common; namespace ConsoleApp { internal class Program { p ...

  8. 【GOF23设计模式】代理模式

    来源:http://www.bjsxt.com/ 一.[GOF23设计模式]_代理模式.静态代理 package com.test.proxy.staticProxy; public interfac ...

  9. 帝吧出征FB：这李毅吧的“爆吧”文化是如何形成的

    声明:本文不对爆吧行为及其涉及的事件进行是非判断,只探讨帝吧文化本身,欢迎拍砖.更正和补充. 一.“帝吧FB出征”事件梳理 继上次全网集体骂 “薯片”事件后,昨日(1月20日)晚7点,又发生了一次互联 ...

  10. CSS动态伪类选择器温故-3

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...