WEBVTT 0 00:00.680 --> 00:05.720 Before we move on, I just want to address two important questions when it comes to using this 1 00:05.720 --> 00:06.800 datalist element. 2 00:07.040 --> 00:11.900 Remember, it's just a way for a user to select many different options. 3 00:11.930 --> 00:12.370 Okay. 4 00:12.380 --> 00:15.800 Question number one, when to use datalist. 5 00:16.070 --> 00:23.150 Since the datalist has no built in mechanism to require that a user select a provided option, they 6 00:23.150 --> 00:27.270 are well suited for inputs that can accept any value. 7 00:27.290 --> 00:31.790 So a good example would be asking a user to select their favorite food. 8 00:31.820 --> 00:35.990 There's an infinite amount of food out there that the user could select, but we could just provide 9 00:35.990 --> 00:39.540 a few items in the datalist selection tool. 10 00:39.560 --> 00:46.310 This is a good example, because the user is always allowed to input any value he or she wants. 11 00:46.310 --> 00:51.860 They don't have to select one of our lists because what's good with the datalist is that it gives the 12 00:51.860 --> 00:56.240 user freedom to still type or input any value of their choosing. 13 00:56.240 --> 01:00.840 They don't have to use one of our pre-selected values or options. 14 01:00.900 --> 01:09.450 So then, Clyde, what about our periodic table example? That does have a predefined limited set of valid 15 01:09.450 --> 01:10.320 values. 16 01:10.320 --> 01:16.020 So shouldn't that instance be better handled by select element, for example, because it will then 17 01:16.020 --> 01:20.160 force a selection, a correct selection in the periodic table? 18 01:20.160 --> 01:22.470 Well, you could argue that, yes. 19 01:22.470 --> 01:29.550 But I like to also think there's always exceptions to the rule. And one exception to this rule that we 20 01:29.550 --> 01:36.420 should only use datalists when the user can accept any value is when you have a large number of valid 21 01:36.420 --> 01:37.380 selections. 22 01:37.380 --> 01:44.400 For example, using a select element list on a huge number of items in the periodic table would likely 23 01:44.400 --> 01:52.350 be very frustrating for a user. because having a select list will impede the user by forcing them to 24 01:52.350 --> 01:56.190 sift through hundreds of options to find the one they are looking for. 25 01:56.190 --> 02:02.370 So I would kind of argue that an autocomplete box fits this use in a bit better here because a user 26 02:02.370 --> 02:05.100 can quickly filter the list by typing 1 or 2 characters. 27 02:05.130 --> 02:07.890 And that's why I still used the datalist element 28 02:07.890 --> 02:10.590 even when we were dealing with the periodic table. 29 02:10.620 --> 02:15.600 I guess the point I'm trying to say through all this is that there are always exceptions to the rule 30 02:15.600 --> 02:21.300 and you need to just think about what each element gives you - a select versus autocomplete - and decide 31 02:21.300 --> 02:24.480 what you think is best for user experience. 32 02:24.480 --> 02:25.740 So that's question number one - 33 02:25.740 --> 02:27.210 when to use the datalist. 34 02:27.480 --> 02:33.690 The second question is: what are the limitations of using the datalist element? 35 02:33.690 --> 02:36.240 And unfortunately, there are limitations. 36 02:36.240 --> 02:40.380 Its major limitation is a lack of customization. 37 02:40.380 --> 02:45.630 For instance, you can't use CSS to do numerous things. 38 02:45.630 --> 02:50.190 You can't use CSS to change the display of its options. 39 02:50.190 --> 02:53.340 You can't control the positioning of the actual list itself. 40 02:53.370 --> 02:57.810 You can't control what's considered a match, for example, case sensitivity match at the beginning 41 02:57.810 --> 03:00.800 of a string versus anywhere, and so on and so forth. 42 03:00.810 --> 03:05.250 And of course, you can't define the number of characters typed before the browser shows a result to 43 03:05.250 --> 03:08.010 the user, etc etc. 44 03:08.010 --> 03:11.790 So, there are limitations that you have to be aware of when using the datalist, 45 03:11.790 --> 03:17.190 but most of the time if you're just wanting a quick list and to help the user with some predefined lists, 46 03:17.220 --> 03:19.260 it's a really useful tool. 47 03:19.290 --> 03:20.430 Let's move on.