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文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 HTML / CSS
推荐10个CSS3 制作的创意下拉菜单效果
Feb 11 HTML / CSS
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
HTML5注册页面示例代码
Mar 27 HTML / CSS
深入浅析HTML5中的SVG
Nov 27 HTML / CSS
canvas与html5实现视频截图功能示例
Dec 15 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
CSS布局之浮动(float)和定位(position)属性的区别
Sep 25 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动态变静态原理
2006/11/25 PHP
MySQL授权问题总结
2007/05/06 PHP
PHP 输出缓存详解
2009/06/20 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
2013/09/10 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
浅析vue数据绑定
2017/01/17 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
深入讲解Python编程中的字符串
2015/10/14 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
python实现维吉尼亚加密法
2019/03/20 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
python爬取抖音视频的实例分析
2021/01/19 Python
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
苹果音乐订阅:Apple Music
2018/08/02 全球购物
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
2014年高数考试作弊检讨书
2014/12/14 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
入党自传范文2015
2015/06/26 职场文书