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. Qt 学习之路：存储容器

    存储容器(containers)有时候也被称为集合(collections),是能够在内存中存储其它特定类型的对象,通常是一些常用的数据结构,一般是通用模板类的形式.C++ 提供了一套完整的解决方案, ...

  2. Java基础知识强化之IO流笔记07：自定义的异常概述和自定义异常实现

    1. 开发的时候往往会出现很多问题(java内部系统框架中没有提供这些异常) 比如说:考试成绩必须在0~100之间. 很明显java没有对应的异常,需要我们自己来做一个异常. (1)继承自Except ...

  3. C#中的转义字符

    一些常用的转义字符: \n  换行 \b  backspace,删除光标前面的一个字符 \t  tab键 由多个空格组成的一个字符,具有行与行之间的对齐功能 \\  \ 如果在字符串前面加@的话: 1 ...

  4. Sublime Text3使用详解

    Sublime Text简介 Sublime Text - 性感的代码编辑器.程序员之必备神器 Sublime Text 是一个代码编辑器,也是HTML和散文先进的文本编辑器.Sublime Text ...

  5. JDK小技巧

    鉴于这段时间重新拾起Android,电脑上又是一大堆不同JDK版本的项目.来回切换JDK环境也够折磨人的. 不同版本JDK切换之后,java -version命令仍然显示的是之前的JDK版本,重启电脑 ...

  6. css居中技巧

    1    text-align: center; 只能对图片,按钮,文字等行内元素(display为inline或inline-block等)进行水平居中.在IE6.7中能对任何元素进行水平居中.另外 ...

  7. Struts2里如何取得request,session,application

    第一种:取得MAP类型的request,session,application在java文件里写 package com.xjtu.st; import java.util.Map; import c ...

  8. HTML 学习笔记

    1HTML 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的. 并且只有这6种标题,标题中加多个空格,和一个空格没区别,标题文字前后加默认空格会被去除. ...

  9. android launcher3 home页简易分析

    最近在修改一个问题:就是修改home页下,用户手动拖出来的APP图片下面的字体显示不全,思路比较明确,需要尽量加大整个APP控件的高度,或者缩小图片和文字之间的间隔. 跟代码发现APP整个控件的lay ...

  10. WPF实现摄像头镜像翻转

    之前的项目需要镜像翻转摄像头视频,使用Aforge.Net来处理视频. 一开始考虑直接从Aforge.Net读取没一帧视频图片,然后复制给WPF的Image控件,这种方法基本很卡,所以放弃了. 考虑到 ...