DEV Community

Senad Meškin
Senad Meškin

Posted on

4 2

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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay