WEBVTT 0 00:00.350 --> 00:02.720 Welcome back to yet another cool lecture. 1 00:02.750 --> 00:09.350 Now we're going to be talking about another really, really useful form widget, and that is the autocomplete 2 00:09.350 --> 00:10.070 box. 3 00:10.250 --> 00:12.500 Remember, we've spoken about the select box. 4 00:12.530 --> 00:14.660 Now we're talking about the autocomplete box. 5 00:14.660 --> 00:19.460 Both of them are a way for a user to select many different options. 6 00:19.460 --> 00:21.050 So what is autocompletion? 7 00:21.050 --> 00:25.250 Well, it's a very familiar pattern that all web users are familiar with. 8 00:25.280 --> 00:29.900 You know, like when you do a search, your search engine suggests terms. 9 00:29.900 --> 00:36.200 When you type a new email message, your mail client, like Gmail, for example, they'll suggest recipients. 10 00:36.230 --> 00:44.630 This functionality, however, traditionally required us to use lots of JavaScript to make autocompletion 11 00:44.630 --> 00:45.260 work. 12 00:45.260 --> 00:51.710 But I've got good news for you because one of the new HTML elements is what's known as the datalist 13 00:51.710 --> 00:58.550 element, and this datalist element brings the autocomplete functionality to the browser, natively. 14 00:58.550 --> 01:02.340 But there are a few nuances on getting this datalist to work. 15 01:02.340 --> 01:08.250 So, instead of me just typing it all onto a screen, let me hop over to the console and walk you through 16 01:08.250 --> 01:09.630 how to set it up. 17 01:10.760 --> 01:11.210 Okay. 18 01:11.210 --> 01:14.630 So how does this datalist element work? 19 01:14.660 --> 01:18.320 Well, let's start off with a very traditional text input field, right? 20 01:18.320 --> 01:26.000 So let's have a label, and let's say we've got a periodic table - pTable - and the label can be Periodic 21 01:26.030 --> 01:27.890 Table Symbol. 22 01:28.400 --> 01:33.050 Say the user wants to find out more about a certain periodic symbol. 23 01:33.080 --> 01:34.310 Okay, so that's the label. 24 01:34.310 --> 01:40.580 And then here, as I mentioned, I want a traditional input where it's type attribute is set to text. 25 01:40.610 --> 01:43.430 We can give its name attribute pTable. 26 01:43.970 --> 01:49.460 And the ID has to match the for attribute's name, which is also pTable. 27 01:49.490 --> 01:50.560 Very, very simple. 28 01:50.570 --> 01:51.650 If we go to the browser, 29 01:51.680 --> 01:52.580 what does this look like? 30 01:52.610 --> 01:55.790 Well, you can see it's just a plain boring old text field. 31 01:55.790 --> 02:00.680 So if the user wants to find lithium, for example, they just have to type it out. 32 02:00.680 --> 02:03.650 They could misspell it by mistake and then submit it to the server. 33 02:03.950 --> 02:05.030 Not a very good thing, right? 34 02:05.030 --> 02:08.510 So we want a way that kind of helps the user. 35 02:08.780 --> 02:10.430 How do we do it with a datalist? 36 02:10.550 --> 02:12.050 Well, it's very, very simple. 37 02:12.050 --> 02:18.170 The first thing I want to mention is it is a HTML element, full element, meaning it's got an opening 38 02:18.170 --> 02:20.660 and closing tag. So we define our datalist, 39 02:20.690 --> 02:22.400 it's got an opening and closing tag. 40 02:22.400 --> 02:24.680 So that's the first step when creating a datalist. 41 02:25.360 --> 02:32.320 And with using a datalist, we can provide a list of options the user can select to complete the field. 42 02:32.320 --> 02:35.290 In other words, we have to wrap options in here, right? 43 02:35.320 --> 02:36.760 We don't need a value yet. 44 02:36.760 --> 02:38.890 I'll show you a bit later how we can use it. 45 02:38.890 --> 02:44.770 And let's just put some in here, you know, like hydrogen and let's maybe put a few more. 46 02:44.800 --> 02:46.480 You know, I don't want to do everything here. 47 02:46.480 --> 02:47.500 We can do calcium. 48 02:47.500 --> 02:49.750 We can do lithium. 49 02:49.750 --> 02:51.520 I mean, we can we can keep going, right. 50 02:51.520 --> 02:52.960 And we can have etc here. 51 02:52.960 --> 02:54.910 This in and of itself does nothing. 52 02:54.910 --> 02:56.230 Let's go to the browser and I'll show you. 53 02:56.230 --> 02:57.820 Nothing has happened. 54 02:57.910 --> 02:58.380 Right? 55 02:58.390 --> 02:59.650 I can type start typing 56 02:59.650 --> 03:05.350 lithium, it doesn't help the user. And this is the nuance that you have to remember when it comes to the 57 03:05.350 --> 03:06.670 datalist element. 58 03:06.670 --> 03:15.730 The datalist element has to have an ID. So let's first put an ID and let's call this ID pTable_list. 59 03:15.760 --> 03:17.020 So there's our datalist. 60 03:17.050 --> 03:19.300 It's got an ID. Again, this does nothing. 61 03:19.300 --> 03:20.140 Go to the browser, 62 03:20.140 --> 03:26.480 nothing happens. In order to associate this with this input of type text, we need another attribute. 63 03:26.480 --> 03:29.450 And this attribute is ... drumroll 🥁 ... 64 03:32.930 --> 03:35.030 It's the list attribute. 65 03:35.060 --> 03:35.420 All right. 66 03:35.420 --> 03:41.090 So we've got this list attribute, and we have to assign it to the same value of the ID in the datalist. 67 03:41.270 --> 03:41.630 Okay. 68 03:41.630 --> 03:44.450 Which we've called pTable_list. 69 03:46.090 --> 03:49.900 So just remember, the list has to match the ID. 70 03:49.990 --> 03:52.240 Now we've linked the two in HTML. 71 03:52.450 --> 03:57.460 What's really cool is if we go to the browser, now we've got help from the browser. 72 03:57.460 --> 03:58.040 How cool. 73 03:58.060 --> 04:01.240 So if the user starts typing lithium, there you go. 74 04:01.270 --> 04:03.070 The user can just pre-select it. 75 04:03.100 --> 04:06.040 How awesome is that, my dear students. 76 04:06.070 --> 04:06.620 (sound: nailed it) 77 04:06.640 --> 04:07.750 But we're not quite done. 78 04:07.780 --> 04:09.340 There's something else I want to show you. 79 04:09.820 --> 04:13.390 You notice on here, with all our options, we don't have any value attribute. 80 04:13.390 --> 04:15.760 And we can put value attributes on here. 81 04:15.790 --> 04:20.710 For example, for hydrogen, let's have H. For calcium 82 04:20.710 --> 04:24.340 let's have Ca. For Lithium, 83 04:25.720 --> 04:27.190 let's have a Li. 84 04:27.220 --> 04:30.910 And for silicone, let's give it a value of 85 04:30.910 --> 04:32.160 I guess we can just do SI. 86 04:32.200 --> 04:33.100 Same same. 87 04:33.130 --> 04:36.610 Now, if we go to the browser, check what happens, right? 88 04:36.640 --> 04:42.130 We've assigned a value, which is kind of the shorthand version, so the user can start typing hydrogen. 89 04:42.130 --> 04:43.030 When they select it, 90 04:43.030 --> 04:46.750 only H is shown in the box. So this might come in handy, 91 04:46.780 --> 04:53.740 for example, if the user knows the word hydrogen but doesn't know the code is H. Or if the user knows 92 04:54.970 --> 04:57.340 lithium but doesn't know the code is Li. 93 04:57.490 --> 05:03.850 So you can see that there might be some very useful cases for you, including a value attribute on each 94 05:03.880 --> 05:04.570 option. 95 05:05.410 --> 05:06.160 So there you go. 96 05:06.190 --> 05:09.850 That's the autocomplete box covered. 97 05:09.900 --> 05:13.090 Hope you're having a lot of fun and let's march on. 98 05:13.090 --> 05:14.350 We've still got a lot to cover. 99 05:14.380 --> 05:15.100 See you now.