DEV Community

Cover image for 🔎 Easy Autocomplete / Suggestions for Inputs with just HTML5 | datalist tag
Niall Maher
Niall Maher

Posted on

19 5

🔎 Easy Autocomplete / Suggestions for Inputs with just HTML5 | datalist tag

Sometimes you would like to suggest some options to a user as they type something into an input. Maybe there are popular search categories or tags that people are looking for. You could, of course, implement an API driven feature, or if you want to get a quick way for it to be up and running why not just use the datalist tag?


In case you want to watch me mess around with the datalist tag you can watch it here or else keep scrolling to read.

Video showing datalist in action.


The HTML <datalist> element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls. — MDN

Datalist acts as a hybrid between a normal input and a select field where it allows users to either choose a suggested option, see suggestions as you type, or add in their own option.

So how does it work?

Let’s show you how to add the datalist tag to a regular old <input type="text"> as a simple example (and probably the most common one you will use).
datalist will work nearly identically to a select tag taking inner options.

<input type="text" id="programming_language" list="languages"/>
<datalist id="languages">
 <option value="JavaScript"></option>
 <option value="Python"></option>
 <option value="Java"></option>
 <option value="HTML">Stop being a troll</option>
</datalist>
Enter fullscreen mode Exit fullscreen mode

The important thing you will see here is that our input takes a list as an option that directs to the id of the datalist you want to use to populate the input.

Looking at datalist in action.

You can also add in some inner notes so in this example you will see if someone starts typing “Html” as their favorite programming language, we can show a little note telling them to stop trolling us…

The other really cool thing about datalist is that it isn’t just strictly for inputs with a type of text. You can use it to add some suggestions to pretty much any tags including date and color tags.

Here’s an example of it in use with a color picker:

<label for="pick_color">Pick a color</label>
<input type="color" id="pick_color" list="colors"/>
<datalist id="colors">
 <option value="#155AF0"></option>
 <option value="#F107BA"></option>
 <option value="#2B2B2B"></option>
</datalist>
Enter fullscreen mode Exit fullscreen mode

Looking at a datalist being used for input using a type of color

I’m a big fan of learning by hacking so jump straight into this CodePen to try it out for yourself:

Example of the datalist tags in action
When to use this? Since this will add DOM elements, I would suggest using this when you don’t have a whole database worth of suggestions (maybe less than 50 or so is a good rule of thumb for me).

Until the next one, happy coding! ❤


Follow me on Twitter

Subscribe on CodĂş Community

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (1)

Collapse
 
micahlt profile image
Micah Lindley •

I knew something like this existed since I saw it on a MediaWiki! Thanks a lot for the great post đź‘Ť

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore

đź‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay