HTML Datalist

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Search for a command to run...

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
The process is simple and easy! Just fill out the order form on our webpage. If you need assistance with this, the support team is right behind you writing help . You can easily order essays online at the lowest prices from us! The most professional essay writing paper service available 24/7.
Most of you know me for my consistency, a golden arrow in my blog series. I've written 1000 articles in 1008 days! Almost an article a day, and my honeymoon was the only holiday I ever took. I'm super proud of this achievement; it has been a fantasti...

It's not the first time I'll be talking about community. I think it's an essential aspect of any successful tool. This shows in my previous explorations of Astro, Medusa, and now Vendure as well. All these products thrive in a super open, welcoming, ...

The cool part about Vendure is how easy it is to set up and how abstract each layer is. Basically, we get the following elements: External database Server Worker Admin UI Frontend While this is amazing, it also brings a bit of complexity when it co...

The previous article looked at customizing Vendure on a data and process level. In this article, we'll look at customizing emails, as they are often a big part of a webshop system. We'll be looking at two different layers of customization for customi...

Even though Vendure is a pretty significant project out of the box, in some cases, we might want to go in and modify some elements to work to our specific use case. In this article, I'll take a high-level look at some elements we can customize within...

Confession time: I have never used the Datalist before! Therefore I thought it was about time I did some research into what it can be used for.
The Datalist specifies a list of pre-defined option which can be used for an input field.
This means it can be used as an autocomplete for input fields.
Let's see how to use it:
<label for="looney"
><input list="looneys" name="looneys" id="looney" /> is my favorite Looney Tune!</label
>
<datalist id="looneys">
<option value="Bugs Bunny"> </option>
<option value="Daffy Duck"> </option>
<option value="Elmer Fudd"> </option>
<option value="Foghorn Leghorn"> </option>
<option value="Marvin the Martian"> </option>
<option value="Porky Pig"> </option>
<option value="Road Runner"> </option>
<option value="Speedy Gonzales"> </option>
<option value="Sylvester"> </option>
<option value="Tasmanian Devil"> </option>
<option value="Tweety"> </option>
<option value="Wile E. Coyote"> </option>
<option value="Yosemite Sam"> </option>
</datalist>
Wow, that is all! Amazing right?
All we need to do is define list="" on our input, and then we can define a datalist with the same id as the list.
This will generate an input with autocomplete functionality. Basically a better select.
You can view it in action on this Codepen.
It can not replace a select fully, so people will be able to type whatever they want in the box, and we can't stop them unless we are doing some JavaScript magic.
To be honest, I'm quite surprised how well it is supported. We can even find a polyfill for IE9<.

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter