点评:这篇文章主要介绍了html5 datalist标签使用示例(自动完成组件),需要的朋友可以参考下
以前需要用JS写一个自动完成组件(Suggest),很费劲。HTML5时代则不用了,直接使用datalist标签,直接减少了工作量。如下NyfHTML5中文学习网 - HTML5先行者学习网
NyfHTML5中文学习网 - HTML5先行者学习网
NyfHTML5中文学习网 - HTML5先行者学习网
<!DOCTYPE html>NyfHTML5中文学习网 - HTML5先行者学习网
<html>NyfHTML5中文学习网 - HTML5先行者学习网
<head>NyfHTML5中文学习网 - HTML5先行者学习网
<title>HTML5 datalist tag</title>NyfHTML5中文学习网 - HTML5先行者学习网
<meta charset="utf-8">NyfHTML5中文学习网 - HTML5先行者学习网
</head>NyfHTML5中文学习网 - HTML5先行者学习网
<p>NyfHTML5中文学习网 - HTML5先行者学习网
浏览器版本:<input list="words">NyfHTML5中文学习网 - HTML5先行者学习网
</p>NyfHTML5中文学习网 - HTML5先行者学习网
<datalist id="words">NyfHTML5中文学习网 - HTML5先行者学习网
<option value="Internet Explorer">NyfHTML5中文学习网 - HTML5先行者学习网
<option value="Firefox">NyfHTML5中文学习网 - HTML5先行者学习网
<option value="Chrome">NyfHTML5中文学习网 - HTML5先行者学习网
<option value="Opera">NyfHTML5中文学习网 - HTML5先行者学习网
<option value="Safari">NyfHTML5中文学习网 - HTML5先行者学习网
<option value="Sogou">NyfHTML5中文学习网 - HTML5先行者学习网
<option value="Maxthon">NyfHTML5中文学习网 - HTML5先行者学习网
</datalist>NyfHTML5中文学习网 - HTML5先行者学习网
</body>NyfHTML5中文学习网 - HTML5先行者学习网
</html>NyfHTML5中文学习网 - HTML5先行者学习网
NyfHTML5中文学习网 - HTML5先行者学习网datalist提供一个事先定义好的列表,通过id与input关联,当在input内输入时就会有自动完成(autocomplete)的功能,用户将会看见一个下拉列表供其选择。NyfHTML5中文学习网 - HTML5先行者学习网
NyfHTML5中文学习网 - HTML5先行者学习网
NyfHTML5中文学习网 - HTML5先行者学习网
Chrome/Firefox/Opera和IE10+均已支持,Safari直到版本7仍然不支持。NyfHTML5中文学习网 - HTML5先行者学习网
NyfHTML5中文学习网 - HTML5先行者学习网