编程 HTML / CSS

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仍然不支持。

html5 datalist标签使用示例(自动完成组件)

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

CSS3之边框多颜色Border-color属性使用示例

Oct 11 HTML / CSS

利用CSS3实现平移动画效果示例代码

Oct 12 HTML / CSS

浅谈CSS3特性查询（Feature Query: @supports）功能简介

Jul 31 HTML / CSS

CSS3的颜色渐变效果的示例代码

Sep 29 HTML / CSS

纯CSS3实现漂亮的input输入框动画样式库(Text input love)

Dec 29 HTML / CSS

CSS 3.0文字悬停跳动特效代码

Oct 26 HTML / CSS

html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法

Jan 09 HTML / CSS

调用HTML5的Canvas API绘制图形的快速入门指南

Jun 17 HTML / CSS

如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度

Aug 01 HTML / CSS

跨域修改iframe页面内容详解

Oct 31 HTML / CSS

CSS 新特性 contain控制页面的重绘与重排问题

Apr 30 HTML / CSS

css3新特性的应用示例分析

Mar 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

浅析Apache中RewriteCond规则参数的详细介绍

2013/06/30 PHP

强制PHP命令行脚本单进程运行的方法

2014/04/15 PHP

PHP设置Cookie的HTTPONLY属性方法

2017/02/09 PHP

jQuery ajax+PHP实现的级联下拉列表框功能示例

2019/02/12 PHP

FF火狐下获取一个元素同类型的相邻元素实现代码

2012/12/15 Javascript

jquery1.10给新增元素绑定事件的方法

2014/03/06 Javascript

JSON.parse()和JSON.stringify()使用介绍

2014/06/20 Javascript

JavaScript DOM进阶方法

2015/04/13 Javascript

浅谈javascript中for in 和 for each in的区别

2015/04/23 Javascript

学习JavaScript设计模式(单例模式)

2015/11/26 Javascript

JavaScript中字符串与Unicode编码互相转换的实现方法

2015/12/18 Javascript

JS Array创建及concat()split()slice()的使用方法

2016/06/03 Javascript

微信小程序 HTTPS报错整理常见问题及解决方案

2016/12/14 Javascript

jQuery中绑定事件bind() on() live() one()的异同

2017/02/23 Javascript

关于Node.js中Buffer的一些你可能不知道的用法

2017/03/28 Javascript

微信小程序promsie.all和promise顺序执行

2017/10/27 Javascript

ES6学习笔记之map、set与数组、对象的对比

2018/03/01 Javascript

javascript 设计模式之组合模式原理与应用详解

2020/04/08 Javascript

python脚本实现统计日志文件中的ip访问次数代码分享

2014/08/06 Python

python通过文件头判断文件类型

2015/10/30 Python

python 3.6 +pyMysql 操作mysql数据库(实例讲解)

2017/12/20 Python

Python打印输出数组中全部元素

2018/03/13 Python

使用Selenium破解新浪微博的四宫格验证码

2018/10/19 Python

解决python Markdown模块乱码的问题

2019/02/14 Python

Python动态语言与鸭子类型详解

2019/07/01 Python

python-tornado的接口用swagger进行包装的实例

2019/08/29 Python

python lambda函数及三个常用的高阶函数

2020/02/05 Python

使用pandas实现筛选出指定列值所对应的行

2020/12/13 Python

详解使用python爬取抖音app视频(appium可以操控手机)

2021/01/26 Python

用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能

2016/03/15 HTML / CSS

美国时尚女装在线：Missguided

2016/12/03 全球购物

怎么可以提高数据库查询数据的速度

2014/06/28 面试题

Solaris操作系统的线程机制

2015/07/28 面试题

运动会广播稿20字

2014/02/18 职场文书

计算机教师工作总结

2015/08/13 职场文书

晶体管单管来复再生式收音机

2021/04/22 无线电