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 calc()会计算属性详解
Feb 27 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
CSS3 实现的火焰动画
Dec 07 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 27 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 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
我的论坛源代码(十)
2006/10/09 PHP
为PHP初学者的8点有效建议
2010/11/20 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
js实现简单计算器
2015/11/22 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
Python设计模式之抽象工厂模式
2016/08/25 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
Python编程实现蚁群算法详解
2017/11/13 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
店长岗位职责
2013/11/21 职场文书
物流业务员岗位职责
2014/02/08 职场文书
骨干教师个人总结
2015/02/11 职场文书
2015年新教师工作总结
2015/04/28 职场文书
离职信范本
2015/06/23 职场文书
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript