HTML5 datalist实现suggest功能
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功能的更多相关文章
- HTML5 datalist 标签
以前需要用JS写一个自动完成组件(Suggest),很费劲.HTML5时代则不用了,直接使用datalist标签,直接减少了工作量.如下 <!DOCTYPE html> <html& ...
- html5 notification桌面提醒功能
html5 notification桌面提醒功能 <!DOCTYPE html> <html lang="en"> <head> <met ...
- HTML5拍照、摄像机功能实战
HTML5拍照.摄像机功能实战 苏格团队 作者:Tomey 开篇 最近在做一个chrome app的云相机应用,应用包括拍照.摄像.保存照片视频.上传文件等等核心功能,其中涉及到很多HTML5对媒体流 ...
- HTML5上传图片预览功能
HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...
- canvas与html5实现视频截图功能
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...
- 基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.js
在线演示 WebRTC可能是明年最受关注的HTML5标准了,Mozilla为此开发了一套帮助你控制硬件的API,例如,摄像头,麦克风,或者是加速表.你可以不依赖其它的插件来调用你需要的本机硬件设备. ...
- HTML5新增加的功能
1.部分代码代替了以前的代码 例如: 获取焦点 旧:document.getElementById("price");.focus; 新:<input ...
- html5 datalist 选中option选项后的触发事件
使用input + datalist 实现自动补全功能,其中datalist中的内容是根据input输入的内容动态变换的,代码如下 <!DOCTYPE HTML> <html> ...
- html5 canvas 实现倒计时 功能
function showTime(a) { var b = { id: "showtime", //canvasid x: 60, //中心点坐标 X轴; y: 60, //中心 ...
随机推荐
- QT程序库
实际上,QT不仅仅是一个巨大的程序库,而是7个程序库,还包括许多使用工具,qmake是其中的一个.如今,术语GUI工具包代表的东西的用途不再仅仅是系统提供的那么一个小部分(GUI界面).尤其是QT ...
- struts.enable.DynamicMethodInvocation = true 动态方法调用(转)
原文地址:http://blog.csdn.net/wfcaven/article/details/5937557 default.properties 在Struts 2的核心jar包-struts ...
- QT pro文件解析
在QT中使用qmake自动生成pro文件,如果要自己定制工程选项,则需要自行修改pro文件. pro文件有以下关键字:TEMPLATE.TARGET.DESTDIR.DEPENDPATH.INCLUD ...
- 7-ajax的同步和异步?
同步和异步统一根据send()执行的位置来实现分割逻辑同步:1.send()后统一不会被执行,直到http事务完成之后才会之后后续逻辑.2.堵塞send()方法的逻辑.异步:1.send()后面照样执 ...
- Oracle处理特殊字符
检查数据库级的参数设置 select * from nls_database_parameters;
- WARN TaskSetManager: Lost task 0.0 in stage 0.0 (TID 0, worker1): java.lang.ClassNotFoundException: com.spark.firstApp.HelloSpark$$anonfun$2
进行如下设置,解决报错信息. val conf = new SparkConf().setAppName("helloSpark").setMaster("spark:/ ...
- JavaScript奇技淫巧44招
JavaScript是一个绝冠全球的编程语言,可用于Web开发.移动应用开发(PhoneGap.Appcelerator).服务器端开发(Node.js和Wakanda)等等.JavaScript还是 ...
- WebAPI接口测试之matthewcv.WebApiTestClient
WebAPI接口测试之matthewcv.WebApiTestClient matthewcv.WebApiTestClient 1.安装matthewcv.WebApiTestClient包 打开v ...
- js在html中的加载执行顺序
1.加载顺序:引入标记<script />的出现顺序,依次加载 页面上的Javascript代码是HTML文档的一部分,所以Javascript在页面装载时执行的顺序就是其引入标记< ...
- JS中break continue和return的用法?
在 break,continue和return 三个关键字中, break,continue是一起的,return 是函数返回语句,但是返回的同时也将函数停止 break和continue: 退出循环 ...