HTML5 datalist tag usage example (autocomplete component)

Time:2022-5-10

It used to be hard to write a suggestion in JS. In the HTML5 era, there is no need to use the datalist tag directly, which directly reduces the workload. as follows

Copy code

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<title>HTML5 datalist tag</title>
<meta charset=”utf-8″>
</head>
<p>
Browser version: < input list = “words” >
</p>
<datalist>
<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 provides a pre-defined list, which is associated with input through ID. when input in input, it will have the function of autocomplete, and the user will see a drop-down list for selection.

Chrome / Firefox / Opera and ie10 + are supported, but Safari is still not supported until version 7.