I know I've spoken about this before, but why would one choose datalist versus select?
Or vice versa?
When would you want to use one over the other?
And this is a great question because they are so similar, but at the same time they're different.
And you need to understand when one is more appropriate than the other, which is why I'm just emphasizing
this
again. It's going to be a very quick lecture, I promise.
The main difference boils down to what?
That's right.
The user's ability to enter their own value. If you will recall, and I'm sure you do, the datalist
element allows the user to enter any value.
They don't have to select one of our pre-selections, whereas the select element gives the user a predefined
set rigid list.
And if you think about a typical autocomplete scenario, the suggestions are either going to be based
on the user's history or a list of values based on some algorithm.
And this basically just means the choices may not be what the user wants to enter.
Think about a search engine, for example.
Each one has a search suggestion list as you type based on related searches others have previously entered.
This may not be the search phrase you need, so that's why browsers allow you to submit anything you
want.
If, on the other hand, search engines used the select element, then the range of search phrases would
be extremely limited and you would pull your hair out and you would not find that acceptable.
For the record, 20% of daily queries submitted to search engines are unique and have never been submitted
before.
I thought that was quite interesting.
So anyway, the point I'm trying to make is my preference is always to use datalist where you can because
users love choice and they love to be unique.
So give them the freedom to do so.
Try not to restrict your users where possible.
There we go.
I told you it was going to be a quick lecture.
I just wanted to drive this point home one more time.