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的box-reflect设置文字倒影效果的方法讲解
Mar 07 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 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
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
php与php MySQL 之间的关系
2009/07/17 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
javascript 日期常用的方法
2009/11/11 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
jQuery.each使用详解
2015/07/07 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
vue 实现图片懒加载功能
2020/12/31 Vue.js
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
Python中的高级函数map/reduce使用实例
2015/04/13 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
解读! Python在人工智能中的作用
2017/11/14 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
python中的print()输出
2019/04/12 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
理发店策划方案
2014/06/05 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
给客户的感谢信
2015/01/21 职场文书
酒店辞职书范文
2015/02/26 职场文书