WEBVTT

0
00:10.790 --> 00:13.310
So that's the datalist element. It makes sense.

1
00:13.310 --> 00:17.180
But we haven't really spoken about the autocomplete attribute.

2
00:17.750 --> 00:19.910
What is that all about?

3
00:19.940 --> 00:26.000
Well, at its core, the autocomplete attribute can be used to tell the browser to, you guessed it,

4
00:26.000 --> 00:27.260
autocomplete

5
00:27.260 --> 00:33.460
the user's data. And this autocomplete attribute is provided to us by HTML.

6
00:33.470 --> 00:38.690
It's part of the HyperText Markup Language. And it's available not on every single element.

7
00:38.690 --> 00:45.170
It's available on input elements, textarea elements, select elements and form elements.

8
00:45.170 --> 00:51.140
And when its value is set to on, it just means the browser can use the values for future use and suggest

9
00:51.140 --> 00:51.830
values

10
00:51.860 --> 00:52.570
now.

11
00:52.580 --> 00:54.020
So how does it look?

12
00:54.050 --> 00:59.870
Well, here's an example of us using an input element where we put the autocomplete attribute to the

13
00:59.900 --> 01:01.010
on state.

14
01:01.040 --> 01:05.540
"Well, Clyde, okay, it's all good and well that it's on, but who comes up with the values?"

15
01:05.960 --> 01:06.890
Like I mentioned, right,

16
01:06.890 --> 01:12.770
it's part of the HyperText Markup Language and it's basically up to the browser as to what values are shown

17
01:12.770 --> 01:13.540
to a user.

18
01:13.550 --> 01:18.440
Typically, values come from past values entered into by a user, but they may also come from pre-configured

19
01:18.440 --> 01:19.850
values from the browser.

20
01:19.850 --> 01:24.320
For example, the browser might even let the user save their name, address, phone number, email address

21
01:24.320 --> 01:26.450
for autocomplete purposes.

22
01:26.450 --> 01:32.480
I guess what I'm trying to say is you can view datalist as being kind-of under your control, and the

23
01:32.480 --> 01:35.780
autocomplete as being under the browser's control.

24
01:35.780 --> 01:37.190
Your head might be spinning 😵.

25
01:37.190 --> 01:41.330
You might be thinking, "Well, what is the difference between autocomplete and datalist?"

26
01:41.450 --> 01:43.640
Well, that is a very, very good question.

27
01:43.730 --> 01:48.380
Autocomplete tells the browser to give a user options for completion.

28
01:48.500 --> 01:51.200
Okay, so it's kind of up to the browser.

29
01:51.200 --> 01:53.900
You kind of giving control over to the browser.

30
01:53.900 --> 01:59.030
And bear in mind, even if we set autocomplete to off, especially when it comes to passwords, browsers

31
01:59.030 --> 02:02.870
still implement their own password management system and they still might ask the user, do you want

32
02:02.870 --> 02:04.700
to save the password for future use?

33
02:04.700 --> 02:06.260
That's not up to you and I.

34
02:06.290 --> 02:10.440
It's up to the browser. And you can kind of view autocomplete as something similar.

35
02:10.440 --> 02:13.920
We're giving the browser control to show the user certain values.

36
02:13.920 --> 02:15.210
Then we've got datalist.

37
02:15.210 --> 02:22.890
And datalist is really cool because we're in control as to what list suggestions we want to be displayed

38
02:22.890 --> 02:23.610
to the user.

39
02:23.610 --> 02:30.090
And of course it's regardless of previous input. Wow, I know we've gone through quite a lot, but I hope

40
02:30.090 --> 02:34.770
this has made sense and I hope you're getting more intuitive now and feeling more comfortable about

41
02:34.770 --> 02:37.410
how to use the autocomplete box.