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 动画技术
Jul 27 HTML / CSS
CSS3网格的三个新特性详解
Apr 04 HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 HTML / CSS
html5 的a标签 Href 拨电话的写法
Nov 04 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
处理textarea中的换行和空格
Dec 12 HTML / CSS
CSS 制作波浪效果的思路
May 18 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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
javascript知识点收藏
2007/02/22 Javascript
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
javascript 全角转换实现代码
2009/07/17 Javascript
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
Python格式化css文件的方法
2015/03/10 Python
Python3遍历目录树实现方法
2015/05/22 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
Python Process多进程实现过程
2019/10/22 Python
python、Matlab求定积分的实现
2019/11/20 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
介绍一下Java的事务处理
2012/12/07 面试题
学生操行评语大全
2014/04/24 职场文书
党员进社区活动总结
2015/05/07 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python
Oracle中日期的使用方法实例
2022/07/07 Oracle
nginx七层负载均衡配置详解
2022/07/15 Servers