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. GCOV 使用用例

      1.GCOV查看arm-linux代码覆盖率 一.           关于gcov工具 gcov伴随gcc 发布.gcc编译加入-fprofile-arcs -ftest-coverage 参数 ...

  2. 微信支付bug

    1.最基本的操作就是检查各项参数正确2.确保将测试微信号加入测试白名单 3.目录正确:发起授权请求的页面必须是在授权目录下的页面,而不能是存在与子目录中.否则会返回错误,Android返回“Syste ...

  3. C#学习第六天

    今天的内容主要是参数数组,C#允许函数指定一个(只能指定一个)特定的参数,这个参数必须是函数定义中最后一个参数,成为参数数组. 参数数组可以使用个数不定的参数调用函数,可以使用params关键字定义它 ...

  4. 使用Android SDK Manager自动下载速度慢解决方法

    可以在SDK Manager 的更新界面,勾选下载项并去android-sdk-windows\temp文件家中查找文件名称例如:android-2.3.1_r02-linux.zip在前面加上链接h ...

  5. 【转】Java 读写Properties配置文件

    [转]Java 读写Properties配置文件 1.Properties类与Properties配置文件 Properties类继承自Hashtable类并且实现了Map接口,也是使用一种键值对的形 ...

  6. [转帖]gesture recognition

    http://wenku.baidu.com/view/53c3331a6bd97f192279e9c9.html HSI与RGB的Matlab实现. http://wenku.baidu.com/v ...

  7. 简洁的MysqlHelper

    把MySqlXXX的类更改为SqlXXX就可以成为sqlHelper. 另外C#也提供了MysqlHelper和sqlHelper,用起来也挺方便的. public class MySqlHelper ...

  8. Java学习----设计正真的应用程序

    import java.util.Scanner; // 输入10位学生的成绩,并且判断他们的成绩是哪个等级,其中90-100是A级,80-89是B级,70-79是C级,60-69是D级,60分以下E ...

  9. Html5 Canvas学习

    canvas: 首先在html页面中加入canvas标签 <canvas id="canvas" width="1024" height="74 ...

  10. SASS type-of 函数

    今儿写个type-of,算是备忘录吧. 1.number type-of(0) // number type-of(1px) // number 2.string type-of(a) // stri ...