WEBVTT

0
00:04.080 --> 00:10.200
We have been looking at a lot of dropdowns and I always like taking a step back and giving a summary

1
00:10.200 --> 00:11.820
because it can seem quite daunting.

2
00:11.820 --> 00:17.220
And I don't want you to stand too close to the wall that you can't see the painting, or you can't see

3
00:17.220 --> 00:19.170
the wood through the trees, as they say.

4
00:19.200 --> 00:23.340
So anyway, this is just a very quick summary on dropdown menus.

5
00:23.340 --> 00:29.940
And remember by dropdown menus I just mean a way for a user to select many different options.

6
00:29.940 --> 00:37.440
And HTML gives us two ways to allow users to select a dropdown, either through the select box or the

7
00:37.440 --> 00:38.620
autocomplete box.

8
00:38.640 --> 00:44.040
We then looked at select first, didn't we? And that gives the user a predefined set of options to choose

9
00:44.040 --> 00:44.460
from.

10
00:44.460 --> 00:49.440
And then moving away from the select box, we had this autocomplete box. And in order to create this

11
00:49.440 --> 00:56.790
autocomplete box, we use the datalist element and it provides a quick native means of displaying input

12
00:56.800 --> 00:58.890
suggestions to a user.

13
00:58.890 --> 01:03.310
And this datalist element is cool because it allows autocompletion, right?

14
01:03.310 --> 01:09.010
It uses our list that we predefined, but it also lets the user enter their own custom values, which

15
01:09.010 --> 01:10.960
is extremely useful.

16
01:11.020 --> 01:16.210
The other thing with datalists is that they are mostly used with text input types, but they don't

17
01:16.210 --> 01:16.940
have to be.

18
01:16.960 --> 01:22.510
For example, they can be used where the input type is set to range, for example.

19
01:22.510 --> 01:24.160
It can also be used on other elements.

20
01:24.160 --> 01:26.590
I've mentioned this previously, like the select element.

21
01:26.590 --> 01:31.900
And another cool thing with the datalist is that it's native to the browser, and this means that

22
01:31.900 --> 01:37.840
it has a smart filter, autocomplete logic and filtering that makes it easier for us to deliver a better

23
01:37.840 --> 01:41.590
solution faster with less testing required.

24
01:41.590 --> 01:45.050
But as I mentioned, there's not always the good right?

25
01:45.070 --> 01:51.850
There are limitations with datalist and one of them is a lack of customization.

26
01:51.850 --> 01:56.230
If you need a more robust solution, you're going to have to look at third party libraries.

27
01:56.230 --> 02:02.200
For example, jQuery's UI autocomplete widget might be a good place for you to start.

28
02:02.200 --> 02:05.770
But anyway, this was just a very quick summary on what we've learned.

29
02:05.800 --> 02:08.560
Hope you're having a ton of fun and I'll see you in the next lecture.