Categories
HTML

How to create a select box with a search option with HTML?

Spread the love

Sometimes, we want to create a select box with a search option with HTML.

In this article, we’ll look at how to create a select box with a search option with HTML.

How to create a select box with a search option with HTML?

To create a select box with a search option with HTML, we use the datalist element.

For instance, we write

<input list="brow" />
<datalist id="brow">
  <option value="Internet Explorer"></option>
  <option value="Firefox"></option>
  <option value="Chrome"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
</datalist>

to add a datalist element with an id that matches the list attribute value to use the option elements as the autocomplete choices.

When we type in the input, we should see the possible matches show in a drop down list.

Conclusion

To create a select box with a search option with HTML, we use the datalist element.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.