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属性选择符介绍
Oct 17 HTML / CSS
CSS3教程:边框属性border的极致应用
Apr 02 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
html5实现微信打飞机游戏
Mar 27 HTML / CSS
浅谈html5 响应式布局
Dec 24 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 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边学边教》(01.开篇――准备工作)
2006/12/13 PHP
快速开发一个PHP扩展图文教程
2008/12/12 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
php进程间通讯实例分析
2016/07/11 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
Javascript的闭包详解
2014/12/26 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
Python、Javascript中的闭包比较
2015/02/04 Python
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
如何基于python实现归一化处理
2020/01/20 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
毕业自我评价范文
2013/11/17 职场文书
厨师长岗位职责
2014/03/02 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
2014年终个人工作总结
2014/11/07 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
用JS写一个发布订阅模式
2021/11/07 Javascript