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. Redis配置文件分析

    #Redis演示示例配置文件 # 注意单位问题:当须要设置内存大小的时候,能够使用类似1k.5GB.4M这种常见格式: # # 1k=> 1000 bytes #1kb => 1024 b ...

  2. [转] 用PDB库调试Python程序

    Python自带的pdb库,发现用pdb来调试程序还是很方便的,当然了,什么远程调试,多线程之类,pdb是搞不定的. 用pdb调试有多种方式可选: 1. 命令行启动目标程序,加上-m参数,这样调用my ...

  3. Java基础知识强化之集合框架笔记07：Collection集合的遍历之迭代器遍历

    1. Collection的迭代器: Iterator iterator():迭代器,集合的专用遍历方式 2. 代码示例: package cn.itcast_03; import java.util ...

  4. 读写XML

    XML: 代码: //实例化 XmlDocument xmldc = new XmlDocument(); //加载xml文件,参数是路径. xmldc.Load("C:/Users/Des ...

  5. linq的一些用法总结

    获取列表数据. IList<Model> list = dao.getmx(Model, pageInfo);//获取数据列表 1.将列表中id一样的数据进行group by分组,并返回序 ...

  6. ASP.NET的WebConfig

    转:http://blog.csdn.net/q3498233/article/details/8137364 WebConfig 花了点时间整理了一下ASP.NET Web.config配置文件的基 ...

  7. MSChart使用之双Y轴使用

    protected void SearchChart() { Chart1.ChartAreas.Clear(); Chart1.Series.Clear(); ChartArea _ChartAre ...

  8. 带A圈的秘密

    真嗒安全策略的罗罗,,害的我和其他的不一样.

  9. ORACLE调度之基于事件的调度（二）【weber出品】

    一.回顾 调度分基于时间的调度和基于事件的调度. 稍微复习一下前面的只是请浏览:<ORACLE调度之基于时间的调度(一)[weber出品]> 二.知识补充 1.队列:一种数据结构,就像一根 ...

  10. 认识<img>标签，为网页插入图片

    在网页的制作中为使网页炫丽美观,肯定是缺少不了图片,可以使用<img>标签来插入图片. 语法: <img src="图片地址" alt="下载失败时的替 ...