The datalist(datalist) element

To do this, you first create a label and input.

Who is your goddess?</label>
<input type="text" id="goddess" name="goddess">
Copy the code

Next, create a Datalist list element.

In it, add an Option element for each auto-completed selection. Using the example above, we will create an option for each goddess.

<label for="goddess">Who is your goddess?</label>
<input type="text" id="goddess" name="goddess">

<datalist>
 <option>Xiaotong guan</option>
 <option>Ada</option>
 <option>Wang Ou</option>
 <option>ghosts</option>
 <option>Pan xiaoting</option>
</datalist>
Copy the code

Finally, we need to associate datalist with input. Provide an ID for the datalist and add the list attribute to your input with a value equal to your Datalist ID.

<label for="goddess">Who is your goddess?</label>
<input type="text" id="goddess" name="goddess" list="goddess-list">

<datalist id="goddess-list">
 <option>Xiaotong guan</option>
 <option>Ada</option>
 <option>Wang Ou</option>
 <option>ghosts</option>
 <option>Pan xiaoting</option>
</datalist>
Copy the code

Now, as the user types, the browser displays a list of options to choose from

The final result

Browser compatibility

The datalist element is available in all modern browsers

Pay attention to the public number, the first time to receive the latest articles. If it helps you a little bit, you can like, like and collect, and you can reward the author with a small amount to encourage the author to write more and better articles

Now pay attention to also send some network high-quality video course network disk information ah, can save a lot of money for you!