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 选择器 属性选择器介绍
Jan 21 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
Jan 09 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
Mar 18 HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 HTML / CSS
HTML5未来发展趋势
Feb 01 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
html5唤醒APP小记
Mar 27 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 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 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
jquery插件开发注意事项小结
2013/06/04 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
python的几种开发工具介绍
2007/03/07 Python
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
详解Python中break语句的用法
2015/05/14 Python
Python实现两款计算器功能示例
2017/12/19 Python
值得收藏的10道python 面试题
2019/04/15 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
Python运行异常管理解决方案
2020/03/09 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
法国足球商店:Footcenter
2019/07/06 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
大学生入党自我鉴定
2013/10/31 职场文书
车工岗位职责
2013/11/26 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
奥运会口号
2014/06/13 职场文书
硕士学位申请报告
2015/05/15 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
Python答题卡识别并给出分数的实现代码
2021/06/22 Python