Before we move on, I just want to address two important questions when it comes to using this
datalist element.
Remember, it's just a way for a user to select many different options.
Okay.
Question number one, when to use datalist.
Since the datalist has no built in mechanism to require that a user select a provided option, they
are well suited for inputs that can accept any value.
So a good example would be asking a user to select their favorite food.
There's an infinite amount of food out there that the user could select, but we could just provide
a few items in the datalist selection tool.
This is a good example, because the user is always allowed to input any value he or she wants.
They don't have to select one of our lists because what's good with the datalist is that it gives the
user freedom to still type or input any value of their choosing.
They don't have to use one of our pre-selected values or options.
So then, Clyde, what about our periodic table example? That does have a predefined limited set of valid
values.
So shouldn't that instance be better handled by select element, for example, because it will then
force a selection, a correct selection in the periodic table?
Well, you could argue that, yes.
But I like to also think there's always exceptions to the rule. And one exception to this rule that we
should only use datalists when the user can accept any value is when you have a large number of valid
selections.
For example, using a select element list on a huge number of items in the periodic table would likely
be very frustrating for a user. because having a select list will impede the user by forcing them to
sift through hundreds of options to find the one they are looking for.
So I would kind of argue that an autocomplete box fits this use in a bit better here because a user
can quickly filter the list by typing 1 or 2 characters.
And that's why I still used the datalist element
even when we were dealing with the periodic table.
I guess the point I'm trying to say through all this is that there are always exceptions to the rule
and you need to just think about what each element gives you - a select versus autocomplete - and decide
what you think is best for user experience.
So that's question number one -
when to use the datalist.
The second question is: what are the limitations of using the datalist element?
And unfortunately, there are limitations.
Its major limitation is a lack of customization.
For instance, you can't use CSS to do numerous things.
You can't use CSS to change the display of its options.
You can't control the positioning of the actual list itself.
You can't control what's considered a match, for example, case sensitivity match at the beginning
of a string versus anywhere, and so on and so forth.
And of course, you can't define the number of characters typed before the browser shows a result to
the user, etc etc.
So, there are limitations that you have to be aware of when using the datalist,
but most of the time if you're just wanting a quick list and to help the user with some predefined lists,
it's a really useful tool.
Let's move on.