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背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
Sep 02 HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
CSS3 文字动画效果
Nov 12 HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
纯CSS实现一个简单步骤条的示例代码
Jul 15 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
Terran剧情介绍
2020/03/14 星际争霸
php+dbfile开发小型留言本
2006/10/09 PHP
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
php合并数组中相同元素的方法
2014/11/13 PHP
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
原生JS轮播图插件
2017/02/09 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
Python中Collection的使用小技巧
2014/08/18 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
自荐信的五个重要部分
2013/10/29 职场文书
大学生入党自我鉴定
2013/10/31 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
新闻学专业大学生职业生涯规划范文
2014/03/02 职场文书
安全横幅标语
2014/06/09 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书