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制作的20种loading动效
Jul 05 HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
Html5应用程序缓存(Cache manifest)
Jun 04 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 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启动时候提示PHP startup的解决方法
2013/05/07 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
实例分析PHP将字符串转换成数字的方法
2019/01/27 PHP
javascript radio 联动效果
2009/03/04 Javascript
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
Python网络编程 Python套接字编程
2017/09/13 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
学生信息管理系统python版
2018/10/17 Python
python基础 range的用法解析
2019/08/23 Python
django自定义模板标签过程解析
2019/12/14 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
自荐信格式技巧有哪些呢
2013/11/19 职场文书
毕业生自荐书
2013/12/18 职场文书
中介业务员岗位职责
2014/04/09 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
谢师宴邀请函
2015/02/02 职场文书
课程设计感想范文
2015/08/11 职场文书
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript
python全面解析接口返回数据
2022/02/12 Python