How to use datalist with search field for suggestions?

Answer: We can add datalist using <datalist> tag.

A datalist provides a predefined list of options that can be chosen for a particular task.

It can help the user with predefined suggestions so that the user does not need to type whole text. The datalist can be used with a search list for suggesting the user search any text. If the option in the datalist matches the term you are searching choose it or write the whole text to search it.

In this tutorial, we are going to learn how to create a search field using the datalist.

HTML datalist

To create a search field use <input> tag with type="search".

The data list elements are added using <datalist> tag in HTML.

To add the options in <datalist> use <option> tag.

• Use the list attribute within <input> to use the values of <datalist>.
• Add id to the <datalist> which has the same value as list of <input>.

Example: Add data list to search field

Here, we have created a suggestion list for the search field. Just start typing and you will get a list of suggestions in the search field.

The datalist supports the global attributes like name, id, etc. Add as many options as you can to datalist. There is no such limitation.

Example: Add search field with more suggestions

You can add as many options as you want in datalist. When the user will start typing, there will be a filtered suggestion list with the letter matching the keyword.

Conclusion

The datalist is easy and quick to implement using HTML. The datalist will help the users to search any data easily by suggesting the options from the datalist. So, start using datalist to search fields to provide a user-friendly interface with some suggestions to the user.