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>

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

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

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

CODEPEN