DEV Community

Senad Meškin
Senad Meškin

Posted on

How to create a list of suggestions for your HTML Input field

If you want to have a predefined list of suggestions for your input field by using just simple HTML then <datalist> HTML element is for you.

We will create a list of cities that will be offered as a suggestion for our input field. To create a list we will use the HTML element <datalist> that will have a list of items and id which will be used as a reference to our list.



<datalist id="listOfCities">
        <option value="Bugojno"></option>
        <option value="New York"></option>
        <option value="London"></option>
        <option value="Peking"></option>
</datalist>


Enter fullscreen mode Exit fullscreen mode

Now, we will create an input field and connect it to our list with list attribute.



<input type="text" id="city" list="listOfCities" />


Enter fullscreen mode Exit fullscreen mode

Now when we start typing in our input field suggestions will be loaded.

Suggestions for the input box

CODEPEN

Top comments (0)