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和html制作泡沫对话框实现代码
Mar 21 HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
处理textarea中的换行和空格
Dec 12 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 HTML / CSS
CSS实现章节添加自增序号的方法
Jun 23 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和MySql来与ODBC数据连接
2006/10/09 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
详解python tkinter模块安装过程
2020/01/06 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
PHP数据运算类型都有哪些
2013/11/05 面试题
农民工工资支付承诺函
2014/03/31 职场文书
应届生求职信范文
2014/05/26 职场文书
新文化运动的基本口号
2014/06/21 职场文书
2014年群众路线党员自我评议
2014/09/24 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
旷工辞退通知书
2015/04/17 职场文书
农村老人去世追悼词
2015/06/23 职场文书
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫