html5 datalist标签使用示例(自动完成组件)


Posted in HTML / CSS onMay 04, 2014

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

复制代码
代码如下:

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

html5 datalist标签使用示例(自动完成组件)

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

HTML / CSS 相关文章推荐
巧用CSS3 border实现图片遮罩效果代码
Apr 09 HTML / CSS
css3实现多个元素依次显示效果
Dec 12 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
Jan 31 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
May 03 #HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 #HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 #HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 #HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 #HTML / CSS
HTML5中5个简单实用的API
Apr 28 #HTML / CSS
会走动的图形html5时钟示例
Apr 27 #HTML / CSS
You might like
探讨php中header的用法详解
2013/06/07 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
2017/06/04 Javascript
vue-router单页面路由
2017/06/17 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
vue 集成jTopo 处理方法
2019/08/07 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
python入门基础之用户输入与模块初认识
2016/11/14 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
一套VC试题
2015/01/23 面试题
《水乡歌》教学反思
2014/04/24 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
简单的辞职信模板
2015/05/12 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android