html5中文学习网

您的位置: 首页 > html5资讯 > 最新动态 » 正文

html5 datalist标签使用示例(自动完成组件)_html5教程技巧

[ ] 已经帮助:人解决问题
点评:这篇文章主要介绍了html5 datalist标签使用示例(自动完成组件),需要的朋友可以参考下

以前需要用JS写一个自动完成组件(Suggest),很费劲。HTML5时代则不用了,直接使用datalist标签,直接减少了工作量。如下yPiHTML5中文学习网 - HTML5先行者学习网
yPiHTML5中文学习网 - HTML5先行者学习网

复制代码
代码如下:
yPiHTML5中文学习网 - HTML5先行者学习网
<!DOCTYPE html>yPiHTML5中文学习网 - HTML5先行者学习网
<html>yPiHTML5中文学习网 - HTML5先行者学习网
<head>yPiHTML5中文学习网 - HTML5先行者学习网
<title>HTML5 datalist tag</title>yPiHTML5中文学习网 - HTML5先行者学习网
<meta charset="utf-8">yPiHTML5中文学习网 - HTML5先行者学习网
</head>yPiHTML5中文学习网 - HTML5先行者学习网
<p>yPiHTML5中文学习网 - HTML5先行者学习网
浏览器版本:<input list="words">yPiHTML5中文学习网 - HTML5先行者学习网
</p>yPiHTML5中文学习网 - HTML5先行者学习网
<datalist id="words">yPiHTML5中文学习网 - HTML5先行者学习网
<option value="Internet Explorer">yPiHTML5中文学习网 - HTML5先行者学习网
<option value="Firefox">yPiHTML5中文学习网 - HTML5先行者学习网
<option value="Chrome">yPiHTML5中文学习网 - HTML5先行者学习网
<option value="Opera">yPiHTML5中文学习网 - HTML5先行者学习网
<option value="Safari">yPiHTML5中文学习网 - HTML5先行者学习网
<option value="Sogou">yPiHTML5中文学习网 - HTML5先行者学习网
<option value="Maxthon">yPiHTML5中文学习网 - HTML5先行者学习网
</datalist>yPiHTML5中文学习网 - HTML5先行者学习网
</body>yPiHTML5中文学习网 - HTML5先行者学习网
</html>yPiHTML5中文学习网 - HTML5先行者学习网
yPiHTML5中文学习网 - HTML5先行者学习网

datalist提供一个事先定义好的列表,通过id与input关联,当在input内输入时就会有自动完成(autocomplete)的功能,用户将会看见一个下拉列表供其选择。yPiHTML5中文学习网 - HTML5先行者学习网
yPiHTML5中文学习网 - HTML5先行者学习网
yPiHTML5中文学习网 - HTML5先行者学习网

Chrome/Firefox/Opera和IE10+均已支持,Safari直到版本7仍然不支持。yPiHTML5中文学习网 - HTML5先行者学习网

yPiHTML5中文学习网 - HTML5先行者学习网
(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助