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字体效果的设置方法小结
Jun 13 HTML / CSS
深入解读CSS3中transform变换模型的渲染
May 27 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
浅析HTML5:'data-'属性的作用
Jan 23 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
钉钉企业内部H5微应用开发详解
May 12 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 zend解密软件绿色版测试可用
2008/04/14 PHP
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
一端时间轮换的广告
2006/06/26 Javascript
复制本贴标题和地址的js代码
2008/07/01 Javascript
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python基础之getpass模块详细介绍
2017/08/10 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
Python 中使用 PyMySQL模块操作数据库的方法
2019/11/10 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
征兵宣传标语
2014/06/20 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js