Welcome back to yet another cool lecture.
Now we're going to be talking about another really, really useful form widget, and that is the autocomplete
box.
Remember, we've spoken about the select box.
Now we're talking about the autocomplete box.
Both of them are a way for a user to select many different options.
So what is autocompletion?
Well, it's a very familiar pattern that all web users are familiar with.
You know, like when you do a search, your search engine suggests terms.
When you type a new email message, your mail client, like Gmail, for example, they'll suggest recipients.
This functionality, however, traditionally required us to use lots of JavaScript to make autocompletion
work.
But I've got good news for you because one of the new HTML elements is what's known as the datalist
element, and this datalist element brings the autocomplete functionality to the browser, natively.
But there are a few nuances on getting this datalist to work.
So, instead of me just typing it all onto a screen, let me hop over to the console and walk you through
how to set it up.
Okay.
So how does this datalist element work?
Well, let's start off with a very traditional text input field, right?
So let's have a label, and let's say we've got a periodic table - pTable - and the label can be Periodic
Table Symbol.
Say the user wants to find out more about a certain periodic symbol.
Okay, so that's the label.
And then here, as I mentioned, I want a traditional input where it's type attribute is set to text.
We can give its name attribute pTable.
And the ID has to match the for attribute's name, which is also pTable.
Very, very simple.
If we go to the browser,
what does this look like?
Well, you can see it's just a plain boring old text field.
So if the user wants to find lithium, for example, they just have to type it out.
They could misspell it by mistake and then submit it to the server.
Not a very good thing, right?
So we want a way that kind of helps the user.
How do we do it with a datalist?
Well, it's very, very simple.
The first thing I want to mention is it is a HTML element, full element, meaning it's got an opening
and closing tag. So we define our datalist,
it's got an opening and closing tag.
So that's the first step when creating a datalist.
And with using a datalist, we can provide a list of options the user can select to complete the field.
In other words, we have to wrap options in here, right?
We don't need a value yet.
I'll show you a bit later how we can use it.
And let's just put some in here, you know, like hydrogen and let's maybe put a few more.
You know, I don't want to do everything here.
We can do calcium.
We can do lithium.
I mean, we can we can keep going, right.
And we can have etc here.
This in and of itself does nothing.
Let's go to the browser and I'll show you.
Nothing has happened.
Right?
I can type start typing
lithium, it doesn't help the user. And this is the nuance that you have to remember when it comes to the
datalist element.
The datalist element has to have an ID. So let's first put an ID and let's call this ID pTable_list.
So there's our datalist.
It's got an ID. Again, this does nothing.
Go to the browser,
nothing happens. In order to associate this with this input of type text, we need another attribute.
And this attribute is ... drumroll 🥁 ...
It's the list attribute.
All right.
So we've got this list attribute, and we have to assign it to the same value of the ID in the datalist.
Okay.
Which we've called pTable_list.
So just remember, the list has to match the ID.
Now we've linked the two in HTML.
What's really cool is if we go to the browser, now we've got help from the browser.
How cool.
So if the user starts typing lithium, there you go.
The user can just pre-select it.
How awesome is that, my dear students.
(sound: nailed it)
But we're not quite done.
There's something else I want to show you.
You notice on here, with all our options, we don't have any value attribute.
And we can put value attributes on here.
For example, for hydrogen, let's have H. For calcium
let's have Ca. For Lithium,
let's have a Li.
And for silicone, let's give it a value of
I guess we can just do SI.
Same same.
Now, if we go to the browser, check what happens, right?
We've assigned a value, which is kind of the shorthand version, so the user can start typing hydrogen.
When they select it,
only H is shown in the box. So this might come in handy,
for example, if the user knows the word hydrogen but doesn't know the code is H. Or if the user knows
lithium but doesn't know the code is Li.
So you can see that there might be some very useful cases for you, including a value attribute on each
option.
So there you go.
That's the autocomplete box covered.
Hope you're having a lot of fun and let's march on.
We've still got a lot to cover.
See you now.