(music)
I thought I'd take a break here, and I want to show you how to dynamically add lists to a datalist.
Why would you ever want to do this?
Well, often in programming and apps, things are not static.
Things are dynamically changing.
So let's do an example here.
I'll just use animals - an animal list.
Maybe you've got, you know, an animal rescue site and people have their own page and they add all
their favorite animals and you want those favorite lists to be displayed on their dropdown lists when
they search.
How would we go about doing that?
Well, we have to use some JavaScript, but you'll see it is super, super easy.
Let's get into it.
I'm not even going to wrap this in HTML or forms.
I want to be very, very quick here as to what we do.
I want to give this a label.
We can just say animalInput. And let's say here "Pick your favorite animal".
There is our label. And then I want an input just with standard text type.
You know what,
we're not even going to submit this to the server,
we don't need a name.
Let's give it an ID of animalInput.
So there we go.
If we save this and we look at the browser and refresh it, we've just got a standard text input.
Nothing special there.
What I do want, though, remember, is I want a datalist.
I want to provide a list of the user's previously selected favorite animals, maybe like I mentioned,
they're on a membership page and they've got a whole lot of likes or they've got a whole lot of animals
that they want to rescue, and they've got this list.
So here we go.
I want a datalist.
You have to manually type this out,
I don't know why my IDE doesn't do it for me, datalist.
So there we go,
opening and closing tags.
We know that we have to associate it with an input, right?
And we do that by having a list attribute on the input itself.
What should we give that value?
Let's just say "animal", and then we know the datalist has to have the same ID.
There we go.
But right now this datalist is empty, so it doesn't really help the user in any way.
I don't want to have predefined values in here.
But remember the format.
The format is we need an option and we can give it a value.
We don't have to.
And the option here could be Warthog 🐗.
If we save this, refresh, and the user starts typing "w", there's the warthog.
Okay.
But this would be static.
I don't want this to be static, so let's just comment that out and let's create this dynamically.
How can we do that?
Well, firstly, we need JavaScript, so let's wrap it within a script tag. And let's say, you know,
we, we go to the database and we fetch all the previous animals the user saved, okay?
And let's put it in a variable called animaList. And we'll just store it in an array
for now, let's just say it's warthog,
giraffe,
and elephant.
You know what?
Let me expand this for now, but just pretend we had fetched this from a server.
So it's dynamic, right?
And we could make this list as long as we want it.
So that's the first thing I want to do.
All right, so how do we now put this call it array of animals into that datalist?
Well, it's very simple.
We just have to listen for one event.
When the user clicks on that input field, a focus event gets fired by the DOM automatically.
So when that focus event is fired, I want to loop through our array that we've just created,
and then I want to create option elements and then append that within the datalist.
I know it might sound confusing and I know we're using JavaScript here.
I mean I've actually just defined an array I realized not even explaining what it is. It's just, you
know, it's a data type in JavaScript.
And we donate or donate, donate ...
donate 😂 ...
we define an array with those square brackets.
That's all that that means.
So let's get into it.
It's not that difficult.
And if you're not following along, don't worry, because this is, you know, JavaScript and this course
is not about JavaScript, but I encourage you to go along with me because hopefully you learn a thing
or two.
So let's get into it.
Like I mentioned, we want to grab our input box, right?
So favAnimalInput box, we can do that by accessing the document object, getElementById(), and the
ID we gave it was "animalInput".
Yes.
Okay.
So there we go.
We've got our input.
Now I want to listen for that focus event. And in order to that we have to grab our favoriteAnimalInput,
add an event listener,
we want to listen for the focus event, and we know that a callback function gets executed when that event
fires.
And this is where we write all our code within these curly braces.
Then what I want to do is I want to grab our datalist element, and I want to insert dynamically that
entire animalList array.
So the first step is to grab our datalist.
So let's just call it dynamicAnimals.
Let's grab our document, getElementById(), and we have an ID of "animal".
Very straightforward.
Now, what I want to do is I want to loop over the animal array.
There are a few ways we can do this in JavaScript.
I'm just going to grab our animalList, which is our array, and I'm going to access the forEach method.
And the forEach method is very, very simple.
Basically, it gives us the item.
In our case, I actually could define the item as animal, and then on each loop through we can do something
with that item or that animal.
So on each time that it loops through, I want a few things to happen.
Firstly, I want to create a new option element.
Because remember, if I scroll up, we want an HTML element to look like this option, Warthog, option.
So we need to create this option element
now. We can do that by accessing the createElement() method in the DOM.
So let's define a variable called option.
And yes, it's going to be document.createElement().
And the element we want to create is an option element.
So that's the first step done.
The second step is, I want to set the value using the item in the array.
So that's very, very easy.
All we have to do is grab the option element we've just created, and we're going to set its value property
to what?
That's right.
To the animal.
So when it loops through the warthog for the first time, this is going to be warthog,
we're going to create an option element and it's going to assign its value to warthog.
Basically, it's going to give us this, right?
Then the final thing we have to do is we have to add the option element to the data list, because right
now we've created it.
But that's all we've done.
It's floating in thin air.
It's floating in space 🚀🌌.
So all we have to do is grab our datalist, which we defined in a variable called dynamicAnimals.
And then we're going to access another method called appendChild().
And the appendChild() just adds the element as the last child to the parent.
Right?
So it's basically going to add Warthog first, then Giraffe will go under it, because that'll be the
next last child and then elephant beneath that.
So that's all that that means.
And what do we want to append?
Well, we want to append our option variable, or our option element.
And I think, my dear students, this should do it right.
So let's go to our browser.
Let's expand this, and let's start typing.
Well, there we go.
How cool is that?
It's received the focus event and Warthog, Giraffe and elephant have been dynamically inserted into
the datalist.
Proof is in the pudding, hey.
How awesome is this?
I really, really do enjoy this.
So let's go to our code and let's just remember what it is we did.
First, we defined the HTML.
Very, very simple.
We had an empty datalist element.
We don't even need this comment here.
It's just empty.
And then dynamically we fetched this animal list from a server.
Well, we didn't really - but let's just pretend we did.
We then got our input variable.
We listened for the focus event on that.
And then when it receives focus, what we want to do is we want to grab our datalist element, which
we put in a variable called dynamicAnimals.
So we've got that.
Then we want to loop through the array and through each loop,
we want to create an option element, put the animal's name and its value property, and then append
it to that datalist element.
That's all we've done.
How cool is this
my students! Oh, I dropped my phone.
It's okay.
Anyway, how cool is this
my students.
Seriously, we're learning a ton of information.
I know
sometimes I'm going a bit advanced.
You know, it should just be about forms.
But now we're talking about JavaScript, we're talking about looping over arrays.
But really, I hope I am equipping you.
I know it's going to help you in your career and I hope you're having fun along the way because we need
to have fun.
We need to enjoy what we do. Anyway,
still a ton to learn, as always.
See you in the next lecture.