WEBVTT 0 00:02.780 --> 00:03.320 (music) 1 00:18.290 --> 00:18.800 (music) 2 00:21.300 --> 00:23.500 (music) 3 00:23.830 --> 00:25.450 (music) 4 00:25.780 --> 00:25.850 (music) 5 00:26.580 --> 00:31.340 (music) 6 00:31.350 --> 00:32.310 (music) 7 00:33.300 --> 00:33.590 (music) 8 00:37.100 --> 00:37.370 (music) 9 00:37.370 --> 00:43.460 I thought I'd take a break here, and I want to show you how to dynamically add lists to a datalist. 10 00:44.000 --> 00:45.420 Why would you ever want to do this? 11 00:45.440 --> 00:50.390 Well, often in programming and apps, things are not static. 12 00:50.390 --> 00:52.060 Things are dynamically changing. 13 00:52.070 --> 00:53.780 So let's do an example here. 14 00:53.780 --> 00:55.450 I'll just use animals - an animal list. 15 00:55.460 --> 01:00.680 Maybe you've got, you know, an animal rescue site and people have their own page and they add all 16 01:00.680 --> 01:05.390 their favorite animals and you want those favorite lists to be displayed on their dropdown lists when 17 01:05.390 --> 01:06.110 they search. 18 01:06.110 --> 01:07.520 How would we go about doing that? 19 01:07.520 --> 01:10.800 Well, we have to use some JavaScript, but you'll see it is super, super easy. 20 01:10.820 --> 01:12.080 Let's get into it. 21 01:12.320 --> 01:14.810 I'm not even going to wrap this in HTML or forms. 22 01:14.810 --> 01:17.720 I want to be very, very quick here as to what we do. 23 01:17.720 --> 01:18.800 I want to give this a label. 24 01:18.800 --> 01:25.220 We can just say animalInput. And let's say here "Pick your favorite animal". 25 01:26.360 --> 01:30.890 There is our label. And then I want an input just with standard text type. 26 01:31.540 --> 01:31.960 You know what, 27 01:31.960 --> 01:33.310 we're not even going to submit this to the server, 28 01:33.310 --> 01:34.180 we don't need a name. 29 01:34.210 --> 01:37.420 Let's give it an ID of animalInput. 30 01:37.930 --> 01:38.580 So there we go. 31 01:38.590 --> 01:44.170 If we save this and we look at the browser and refresh it, we've just got a standard text input. 32 01:44.200 --> 01:45.340 Nothing special there. 33 01:45.430 --> 01:49.690 What I do want, though, remember, is I want a datalist. 34 01:49.690 --> 01:55.330 I want to provide a list of the user's previously selected favorite animals, maybe like I mentioned, 35 01:55.360 --> 01:59.110 they're on a membership page and they've got a whole lot of likes or they've got a whole lot of animals 36 01:59.110 --> 02:01.150 that they want to rescue, and they've got this list. 37 02:01.150 --> 02:02.180 So here we go. 38 02:02.200 --> 02:03.460 I want a datalist. 39 02:03.640 --> 02:05.230 You have to manually type this out, 40 02:05.530 --> 02:08.660 I don't know why my IDE doesn't do it for me, datalist. 41 02:08.680 --> 02:09.310 So there we go, 42 02:09.310 --> 02:10.780 opening and closing tags. 43 02:10.810 --> 02:13.810 We know that we have to associate it with an input, right? 44 02:13.810 --> 02:17.350 And we do that by having a list attribute on the input itself. 45 02:18.570 --> 02:19.630 What should we give that value? 46 02:19.650 --> 02:23.640 Let's just say "animal", and then we know the datalist has to have the same ID. 47 02:24.300 --> 02:25.020 There we go. 48 02:25.020 --> 02:29.610 But right now this datalist is empty, so it doesn't really help the user in any way. 49 02:30.790 --> 02:33.220 I don't want to have predefined values in here. 50 02:33.230 --> 02:34.300 But remember the format. 51 02:34.300 --> 02:38.290 The format is we need an option and we can give it a value. 52 02:38.320 --> 02:39.310 We don't have to. 53 02:39.460 --> 02:41.800 And the option here could be Warthog 🐗. 54 02:42.010 --> 02:46.900 If we save this, refresh, and the user starts typing "w", there's the warthog. 55 02:47.120 --> 02:47.400 Okay. 56 02:47.410 --> 02:48.990 But this would be static. 57 02:49.000 --> 02:55.240 I don't want this to be static, so let's just comment that out and let's create this dynamically. 58 02:55.630 --> 02:56.470 How can we do that? 59 02:56.470 --> 03:01.120 Well, firstly, we need JavaScript, so let's wrap it within a script tag. And let's say, you know, 60 03:01.120 --> 03:07.270 we, we go to the database and we fetch all the previous animals the user saved, okay? 61 03:07.270 --> 03:13.030 And let's put it in a variable called animaList. And we'll just store it in an array 62 03:13.030 --> 03:15.490 for now, let's just say it's warthog, 63 03:17.780 --> 03:18.650 giraffe, 64 03:19.880 --> 03:21.290 and elephant. 65 03:21.590 --> 03:21.980 You know what? 66 03:21.980 --> 03:26.570 Let me expand this for now, but just pretend we had fetched this from a server. 67 03:26.570 --> 03:28.120 So it's dynamic, right? 68 03:28.130 --> 03:30.880 And we could make this list as long as we want it. 69 03:30.890 --> 03:32.840 So that's the first thing I want to do. 70 03:32.870 --> 03:38.960 All right, so how do we now put this call it array of animals into that datalist? 71 03:40.150 --> 03:41.090 Well, it's very simple. 72 03:41.090 --> 03:42.590 We just have to listen for one event. 73 03:42.590 --> 03:48.590 When the user clicks on that input field, a focus event gets fired by the DOM automatically. 74 03:48.590 --> 03:54.590 So when that focus event is fired, I want to loop through our array that we've just created, 75 03:54.590 --> 03:59.570 and then I want to create option elements and then append that within the datalist. 76 03:59.690 --> 04:02.270 I know it might sound confusing and I know we're using JavaScript here. 77 04:02.270 --> 04:07.370 I mean I've actually just defined an array I realized not even explaining what it is. It's just, you 78 04:07.370 --> 04:09.440 know, it's a data type in JavaScript. 79 04:09.440 --> 04:12.890 And we donate or donate, donate ... 80 04:14.270 --> 04:15.050 donate 😂 ... 81 04:15.110 --> 04:18.380 we define an array with those square brackets. 82 04:18.710 --> 04:19.580 That's all that that means. 83 04:19.580 --> 04:20.360 So let's get into it. 84 04:20.360 --> 04:21.530 It's not that difficult. 85 04:21.530 --> 04:25.760 And if you're not following along, don't worry, because this is, you know, JavaScript and this course 86 04:25.760 --> 04:29.960 is not about JavaScript, but I encourage you to go along with me because hopefully you learn a thing 87 04:29.960 --> 04:30.470 or two. 88 04:30.770 --> 04:31.970 So let's get into it. 89 04:32.420 --> 04:34.670 Like I mentioned, we want to grab our input box, right? 90 04:34.670 --> 04:43.970 So favAnimalInput box, we can do that by accessing the document object, getElementById(), and the 91 04:43.970 --> 04:48.800 ID we gave it was "animalInput". 92 04:48.800 --> 04:49.430 Yes. 93 04:49.460 --> 04:49.790 Okay. 94 04:49.790 --> 04:50.510 So there we go. 95 04:50.540 --> 04:51.590 We've got our input. 96 04:51.740 --> 04:59.030 Now I want to listen for that focus event. And in order to that we have to grab our favoriteAnimalInput, 97 04:59.450 --> 05:00.830 add an event listener, 98 05:01.100 --> 05:07.190 we want to listen for the focus event, and we know that a callback function gets executed when that event 99 05:07.190 --> 05:07.970 fires. 100 05:08.240 --> 05:12.050 And this is where we write all our code within these curly braces. 101 05:12.050 --> 05:17.400 Then what I want to do is I want to grab our datalist element, and I want to insert dynamically that 102 05:17.400 --> 05:19.380 entire animalList array. 103 05:19.380 --> 05:23.820 So the first step is to grab our datalist. 104 05:23.820 --> 05:28.560 So let's just call it dynamicAnimals. 105 05:29.480 --> 05:34.910 Let's grab our document, getElementById(), and we have an ID of "animal". 106 05:37.110 --> 05:38.270 Very straightforward. 107 05:38.300 --> 05:42.440 Now, what I want to do is I want to loop over the animal array. 108 05:44.350 --> 05:47.200 There are a few ways we can do this in JavaScript. 109 05:47.200 --> 05:53.140 I'm just going to grab our animalList, which is our array, and I'm going to access the forEach method. 110 05:53.290 --> 05:56.680 And the forEach method is very, very simple. 111 05:56.710 --> 05:58.600 Basically, it gives us the item. 112 05:58.600 --> 06:05.770 In our case, I actually could define the item as animal, and then on each loop through we can do something 113 06:05.770 --> 06:08.080 with that item or that animal. 114 06:08.080 --> 06:12.850 So on each time that it loops through, I want a few things to happen. 115 06:12.850 --> 06:17.500 Firstly, I want to create a new option element. 116 06:18.380 --> 06:25.880 Because remember, if I scroll up, we want an HTML element to look like this option, Warthog, option. 117 06:26.610 --> 06:28.350 So we need to create this option element 118 06:28.380 --> 06:32.460 now. We can do that by accessing the createElement() method in the DOM. 119 06:32.460 --> 06:35.040 So let's define a variable called option. 120 06:35.190 --> 06:39.690 And yes, it's going to be document.createElement(). 121 06:39.990 --> 06:42.540 And the element we want to create is an option element. 122 06:42.540 --> 06:44.090 So that's the first step done. 123 06:44.100 --> 06:50.370 The second step is, I want to set the value using the item in the array. 124 06:50.850 --> 06:52.440 So that's very, very easy. 125 06:52.440 --> 06:57.840 All we have to do is grab the option element we've just created, and we're going to set its value property 126 06:57.840 --> 06:58.620 to what? 127 06:59.070 --> 06:59.610 That's right. 128 06:59.610 --> 07:00.330 To the animal. 129 07:00.330 --> 07:04.170 So when it loops through the warthog for the first time, this is going to be warthog, 130 07:04.200 --> 07:08.430 we're going to create an option element and it's going to assign its value to warthog. 131 07:08.850 --> 07:11.370 Basically, it's going to give us this, right? 132 07:14.500 --> 07:23.800 Then the final thing we have to do is we have to add the option element to the data list, because right 133 07:23.800 --> 07:25.030 now we've created it. 134 07:25.030 --> 07:26.040 But that's all we've done. 135 07:26.050 --> 07:27.280 It's floating in thin air. 136 07:27.310 --> 07:28.630 It's floating in space 🚀🌌. 137 07:28.630 --> 07:34.090 So all we have to do is grab our datalist, which we defined in a variable called dynamicAnimals. 138 07:34.090 --> 07:38.260 And then we're going to access another method called appendChild(). 139 07:38.260 --> 07:44.500 And the appendChild() just adds the element as the last child to the parent. 140 07:44.670 --> 07:44.950 Right? 141 07:44.950 --> 07:51.250 So it's basically going to add Warthog first, then Giraffe will go under it, because that'll be the 142 07:51.250 --> 07:54.250 next last child and then elephant beneath that. 143 07:54.310 --> 07:55.600 So that's all that that means. 144 07:55.720 --> 07:57.610 And what do we want to append? 145 07:57.640 --> 08:03.460 Well, we want to append our option variable, or our option element. 146 08:03.760 --> 08:07.060 And I think, my dear students, this should do it right. 147 08:07.210 --> 08:08.380 So let's go to our browser. 148 08:08.560 --> 08:11.080 Let's expand this, and let's start typing. 149 08:11.080 --> 08:11.950 Well, there we go. 150 08:11.980 --> 08:12.580 How cool is that? 151 08:12.580 --> 08:17.960 It's received the focus event and Warthog, Giraffe and elephant have been dynamically inserted into 152 08:17.960 --> 08:18.770 the datalist. 153 08:19.310 --> 08:20.580 Proof is in the pudding, hey. 154 08:20.600 --> 08:22.220 How awesome is this? 155 08:22.700 --> 08:24.290 I really, really do enjoy this. 156 08:24.500 --> 08:27.560 So let's go to our code and let's just remember what it is we did. 157 08:27.590 --> 08:29.530 First, we defined the HTML. 158 08:29.660 --> 08:30.380 Very, very simple. 159 08:30.380 --> 08:32.780 We had an empty datalist element. 160 08:33.260 --> 08:34.430 We don't even need this comment here. 161 08:34.430 --> 08:35.450 It's just empty. 162 08:35.780 --> 08:40.670 And then dynamically we fetched this animal list from a server. 163 08:40.670 --> 08:43.610 Well, we didn't really - but let's just pretend we did. 164 08:43.610 --> 08:45.710 We then got our input variable. 165 08:45.710 --> 08:48.500 We listened for the focus event on that. 166 08:48.800 --> 08:54.680 And then when it receives focus, what we want to do is we want to grab our datalist element, which 167 08:54.680 --> 08:57.200 we put in a variable called dynamicAnimals. 168 08:57.200 --> 08:58.190 So we've got that. 169 08:58.310 --> 09:02.960 Then we want to loop through the array and through each loop, 170 09:02.960 --> 09:09.260 we want to create an option element, put the animal's name and its value property, and then append 171 09:09.260 --> 09:10.790 it to that datalist element. 172 09:10.970 --> 09:11.990 That's all we've done. 173 09:12.140 --> 09:13.100 How cool is this 174 09:13.100 --> 09:16.010 my students! Oh, I dropped my phone. 175 09:18.970 --> 09:19.450 It's okay. 176 09:19.450 --> 09:20.110 It's okay. 177 09:20.560 --> 09:21.700 Anyway, how cool is this 178 09:21.700 --> 09:22.260 my students. 179 09:22.270 --> 09:24.010 Seriously, we're learning a ton of information. 180 09:24.010 --> 09:24.310 I know 181 09:24.310 --> 09:25.810 sometimes I'm going a bit advanced. 182 09:25.810 --> 09:27.640 You know, it should just be about forms. 183 09:27.640 --> 09:31.030 But now we're talking about JavaScript, we're talking about looping over arrays. 184 09:31.300 --> 09:33.160 But really, I hope I am equipping you. 185 09:33.430 --> 09:38.230 I know it's going to help you in your career and I hope you're having fun along the way because we need 186 09:38.230 --> 09:38.710 to have fun. 187 09:38.710 --> 09:41.560 We need to enjoy what we do. Anyway, 188 09:41.590 --> 09:43.570 still a ton to learn, as always. 189 09:43.570 --> 09:45.220 See you in the next lecture.