html5 datalist标识应用示例(全自动进行组件)

2020-10-12 08:57 jianzhan

之前必须用JS写1个全自动进行组件(Suggest),很费力。HTML5时期则无需了,立即应用datalist标识,立即降低了工作中量。以下


拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<head>
<title>HTML5 datalist tag</title>
<meta charset="utf⑻">
</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出示1个事前界定好的目录,根据id与input关系,当在input内键入时就会有全自动进行(autocomplete)的作用,客户可能看见1个往下拉目录供其挑选。

Chrome/Firefox/Opera和IE10+均已适用,Safari直至版本号7依然不适用。