WEBVTT 00:00:06.930 --> 00:00:12.430 In this video we're going to learn how to use the J-curve you want to create to complete widgets. 00:00:12.750 --> 00:00:22.860 So it was a complete which is used to create some input fields where the user is given a list of suggestions 00:00:22.860 --> 00:00:22.890 . 00:00:22.890 --> 00:00:25.800 Once they start typing in the box. 00:00:25.800 --> 00:00:33.840 So for example if we go to the Expedia Web sites and we start typing the city we fly in from 0 0 so 00:00:34.140 --> 00:00:41.370 say we fly into Toronto and we start typing the word so we can already see here a list of suggestions 00:00:41.850 --> 00:00:50.370 that came up and these suggestions they come from a list or a from a pre-populated list of values which 00:00:50.370 --> 00:00:54.460 is made available to the user to choose from. 00:00:54.540 --> 00:00:58.660 And it just makes his user experience easier. 00:00:59.070 --> 00:00:59.570 OK. 00:00:59.760 --> 00:01:05.490 So let's go to our oh it's a complete file and create our own example. 00:01:05.640 --> 00:01:10.790 So we going to go to the Facebook and just add another paragraph. 00:01:11.580 --> 00:01:19.040 It puts your city are going to create any What's in here and give us an idea. 00:01:20.280 --> 00:01:20.940 OK. 00:01:21.210 --> 00:01:27.840 So we want to be able to start typing something in the inputs and see a list of suggestions. 00:01:27.840 --> 00:01:28.400 All right. 00:01:28.740 --> 00:01:37.770 So first we need to make these books and it's a complete books to do that we need to select the inputs 00:01:37.800 --> 00:01:41.280 using its ID. 00:01:42.390 --> 00:01:46.950 Since we have only one was we could have selected only inputs like that. 00:01:47.220 --> 00:01:49.710 But it's fine to go for the ID. 00:01:50.010 --> 00:01:53.830 Ok then we need a method. 00:01:53.850 --> 00:01:58.550 It's the complete method. 00:02:00.000 --> 00:02:04.220 If we use it just like that the box is going to become a complete box. 00:02:04.230 --> 00:02:06.800 But we don't have any source yet. 00:02:07.410 --> 00:02:14.570 So we need a source and for that we need the property source. 00:02:15.420 --> 00:02:22.890 So this property can be set to an array of Kocsis of strings. 00:02:23.820 --> 00:02:32.620 So we can type here a list of city names. 00:02:34.600 --> 00:02:38.840 Let's go for something like this. 00:02:38.850 --> 00:02:42.230 And then some other ones 00:02:52.790 --> 00:02:58.850 and make it simple. 00:03:02.280 --> 00:03:03.750 OK. 00:03:04.550 --> 00:03:15.080 Now we can see that we've got our source data populated And now let's try to type something in there 00:03:15.090 --> 00:03:16.380 . 00:03:16.950 --> 00:03:28.530 If I type a all the values in creating a character that will show up all right if we if we type B. 00:03:28.710 --> 00:03:35.610 Same thing happens if we just start typing London we can see all the corresponding values showing up 00:03:35.620 --> 00:03:35.990 . 00:03:36.480 --> 00:03:37.830 OK. 00:03:37.840 --> 00:03:38.610 All right. 00:03:38.670 --> 00:03:44.400 Now we can start styling our complete books 00:03:47.990 --> 00:03:48.450 to do that. 00:03:48.450 --> 00:03:51.200 We're going to use a class is the UI. 00:03:51.220 --> 00:03:58.800 Oh it's a complete class so if you go to the style tags OK we can just use the UI 00:04:02.940 --> 00:04:06.300 to complete. 00:04:09.030 --> 00:04:09.550 OK. 00:04:09.720 --> 00:04:20.400 So one thing we can do is we can set the maximum height of the seditions OK and you can do that just 00:04:20.400 --> 00:04:25.510 by typing max height. 00:04:25.560 --> 00:04:29.240 They said that 200 pixels. 00:04:29.280 --> 00:04:33.020 If we do that's just trying not to type something in. 00:04:33.580 --> 00:04:40.500 OK so we can see the area is limited now 200 pixels but we can still see see the other values in that 00:04:40.510 --> 00:04:40.850 . 00:04:41.190 --> 00:04:44.370 So to avoid avoid this we can use the overflow 00:04:48.480 --> 00:04:55.380 attributes and we can we are going to be setting the overflow y here. 00:04:55.390 --> 00:04:57.080 Now let's get it to. 00:04:57.370 --> 00:05:03.040 I want to see what happens on it. 00:05:03.060 --> 00:05:06.810 So now we can see that we can actually scroll down and see all the values. 00:05:07.010 --> 00:05:09.810 If we set that to hit and for instance 00:05:13.980 --> 00:05:16.790 the values are knots not so we can we cannot see them. 00:05:16.810 --> 00:05:19.390 OK. 00:05:19.500 --> 00:05:23.640 All right so let's go back to 0 2. 00:05:24.990 --> 00:05:26.730 OK. 00:05:26.730 --> 00:05:34.150 That's for the y axis so for the x axis we can set a max weight. 00:05:36.740 --> 00:05:40.040 Let's set it to 200 pixels. 00:05:41.910 --> 00:05:53.900 OK so as I said typing of the OK we will need a long word so that we can see what happens. 00:05:56.070 --> 00:06:00.680 OK you can see now that's the maximum which is 200 pixels. 00:06:00.780 --> 00:06:06.930 OK let's just make it a little strange the width of the input as well to 200 pixels so that looks better 00:06:06.940 --> 00:06:07.220 . 00:06:07.500 --> 00:06:07.890 So 00:06:17.980 --> 00:06:21.160 OK. 00:06:22.020 --> 00:06:22.940 That looks better. 00:06:22.980 --> 00:06:29.880 We can see that now that the mux with is 2 0 pixels where you see that we can already just scroll and 00:06:29.880 --> 00:06:32.500 see the full value in there. 00:06:32.760 --> 00:06:40.320 OK so we don't have to use the overflow X property but let's disabusing then see if it would be any 00:06:40.680 --> 00:06:41.490 difference. 00:06:41.700 --> 00:06:44.500 That's going to be the same actually. 00:06:46.170 --> 00:06:46.550 OK. 00:06:46.590 --> 00:06:47.550 Is exactly the same thing. 00:06:47.550 --> 00:06:51.060 But if we said it to hit it we'll See that's 00:06:55.050 --> 00:06:58.000 the remainder of the value is. 00:06:58.620 --> 00:07:04.540 OK.