HTML Must Knows the datalist element

Hi, my name is Kars van Iersel. I'm a Software Engineer, located in The Netherlands. I enjoy creating high quality and delightful websites and web applications.
Search for a command to run...

Hi, my name is Kars van Iersel. I'm a Software Engineer, located in The Netherlands. I enjoy creating high quality and delightful websites and web applications.
No comments yet. Be the first to comment.
If you are an SEO newbie or have some experience but would like to get a step-by-step SEO guide on how to avoid common website promotion mistakes, here's a list of SEO tasks based on best practices that you should take into account when creating and ...

Introduction Roughly a year ago I had to make a very large scale application and I couldn't decide on a backend framework. However, I knew I wanted to use Vue.js as my front-end. So I began my long quest the ideal framework for my backend. I had doub...

6 Tips on how to be more focused as a web developer

Introduction No skill is more important for programmers than the ability to write code that works. But all too often, developers don't think about whether their code will work until it's finished, and by then they've already created many bugs that ar...

Intro In my previous post I wrote a bit about the :not() selector and I got a lot feedback that people never heard of this element. So I figured I would dedicate a post just to the :not() CSS selector. What is the :not() selector in CSS? The :not() i...

The HTML <datalist> element is a very powerful input element. It functions as an input field with dropdown options, but here is the catch: it comes with autocomplete. Users will see a drop-down list of predefined options as they write in the input field!
The <datalist> element contains various <option> elements that represent the options that are available to the user.
It kind of feels like a <select> dropdown, but on steroids. Since the user is able to type and get autocomplete options in return.
<datalist><label for="animals">What is your favorite animal?:</label>
<input list="animals" name="animal" id="animal">
<datalist id="animals">
<option value="Dog">
<option value="Cat">
<option value="Horse">
<option value="Donkey">
<option value="Bunny">
</datalist>
Note the id of the <datalist> and the value of the list attribute on the <input> field
The HTML will translate into:
{% codepen https://codepen.io/karsviersel/pen/ZEWJXgW %}
If you click on the input field you already see the generated list of options that I've provided. Now start typing in the input field! As you will notice, once you start typing the list will shrink. It will only show the available options based on what you have typed.
So out of the box, HTML gives us an input field that brings autocomplete to the table.
The beauty of this is that it even works in all browsers! Both desktop and mobile.
When I learned about the <datalist> element I was very happy! In almost every project I had to spend hours creating custom dropdown lists with autocomplete. Never knowing that there was a HTML tag for it!
I wonder what you think of the <datalist> element? Let me know!