1.例子

<!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）的功能，用户将会看见一个下拉列表供其选择。

效果如下

2.注意事项

　　1）google下面input中会出现小三角，点击小三角列表会展开，火狐中没有，但是不管是在google中还是火狐中双击input都会展开列表

　　2）如果列表中已经有了内容，则双击时不起作用

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

参考：http://home.cnblogs.com/u/snandy/

HTML5 datalist实现suggest功能的更多相关文章

  1. HTML5 datalist 标签

    以前需要用JS写一个自动完成组件(Suggest),很费劲.HTML5时代则不用了,直接使用datalist标签,直接减少了工作量.如下 <!DOCTYPE html> <html& ...

  2. html5 notification桌面提醒功能

    html5 notification桌面提醒功能 <!DOCTYPE html> <html lang="en"> <head> <met ...

  3. HTML5拍照、摄像机功能实战

    HTML5拍照.摄像机功能实战 苏格团队 作者:Tomey 开篇 最近在做一个chrome app的云相机应用,应用包括拍照.摄像.保存照片视频.上传文件等等核心功能,其中涉及到很多HTML5对媒体流 ...

  4. HTML5上传图片预览功能

    HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...

  5. canvas与html5实现视频截图功能

    这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...

  6. 基于HTML5实现的超酷摄像头（HTML5 webcam）拍照功能 - photobooth.js

    在线演示 WebRTC可能是明年最受关注的HTML5标准了,Mozilla为此开发了一套帮助你控制硬件的API,例如,摄像头,麦克风,或者是加速表.你可以不依赖其它的插件来调用你需要的本机硬件设备. ...

  7. HTML5新增加的功能

    1.部分代码代替了以前的代码     例如: 获取焦点     旧:document.getElementById("price");.focus;     新:<input ...

  8. html5 datalist 选中option选项后的触发事件

    使用input + datalist 实现自动补全功能,其中datalist中的内容是根据input输入的内容动态变换的,代码如下 <!DOCTYPE HTML> <html> ...

  9. html5 canvas 实现倒计时 功能

    function showTime(a) { var b = { id: "showtime", //canvasid x: 60, //中心点坐标 X轴; y: 60, //中心 ...

随机推荐

  1. Monitor and diagnose performance in Java SE 6--转载

    Java SE 6 provides an in-depth focus on performance, offering expanded tools for managing and monito ...

  2. noip 2015 运输计划 （lca+二分）

    /* 95 最后一个点T了 qian lv ji qiong 了 没学过树剖 听chx听xzc说的神奇的方法 Orz 首先求出每个计划的路径长度 这里写的倍增 然后二分答案 对于每个ans 统计> ...

  3. Canvas画椭圆的方法

    虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生   oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...

  4. C# 自定义线程修改UI（一）

    在Wpf中界面显示数据的修改,都是通过UI线程完成,如果尝试从其他线程中直接修改控件的值回抛出异常,“调用线程无法访问此对象,因为另一个线程拥有该对象”. 例如:http://www.cnblogs. ...

  5. xls和xlsx

      xls XLS 就是 Microsoft Excel 工作表,是一种非常常用的电子表格格式.xls文件可以使用Microsoft Excel打开,另外微软为那些没有安装Excel的用户开发了专门的 ...

  6. Android虚拟机GenyMotion

    GenyMotion:需要VirtualBox,安装后可以选择机型,这个应该是Android for x86的一个改进版虚拟机,在原版的基础上针对不同机型用了和原机型同样的GUI,但是发现缺少了Goo ...

  7. sql - 复制表

    1,复制表结构和内容 1)这个表: select * into new_table_name from old_table_name ref:SQL复制数据表及表结构

  8. [技术翻译]Guava-libraries（一）: 用户指导

    用户指导 本文翻译自http://code.google.com/p/guava-libraries/wiki/GuavaExplained,由十八子将翻译,发表于博客园 http://www.cnb ...

  9. CSU 1616: Heaps（区间DP）

    题目链接:http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1616 1616: Heaps Time Limit: 2 Sec  Memory Lim ...

  10. App Store自动下载WiFi与蜂窝数据切换机制

    写下这个给自己备忘,上次也有一次载了个跟头. 在iOS 7和8里面,除了设置--App Store里面自动更新,自动下载,以及使用蜂窝数据要关之外,别以为用了WiFi挂着程序,就万无一失了. 这种情况 ...