WEBVTT 00:00:06.980 --> 00:00:13.050 In this video you're are going to get introduced to the auto complete feature of the place his library 00:00:13.060 --> 00:00:13.340 . 00:00:13.650 --> 00:00:21.540 So we're going to create a simple application where the user is going to put a city paint using the 00:00:21.780 --> 00:00:23.100 completes feature. 00:00:23.280 --> 00:00:28.810 And once they select a city the mob is going to be censored in that city. 00:00:28.860 --> 00:00:33.280 So it creates a file you know FCP. 00:00:34.050 --> 00:00:38.330 It's also completes those ph. 00:00:39.250 --> 00:00:44.730 OK let's open the file using brackets and let's copy the contents from the previous one 00:00:48.090 --> 00:00:51.440 and change the title to autocomplete 00:00:51.480 --> 00:00:57.550 . 00:00:58.470 --> 00:01:05.930 Now in Astley's all the code except for the code creating them up. 00:01:07.720 --> 00:01:10.800 And let's open up a file 00:01:11.720 --> 00:01:22.060 . 00:01:31.510 --> 00:01:32.630 OK. 00:01:33.030 --> 00:01:41.370 So let's creates our inputs that writes After the month is going to be an input. 00:01:42.460 --> 00:01:54.420 OK this gives an ID city inputs and a placeholder city. 00:01:54.610 --> 00:01:56.850 So it's and inputs of type 00:01:59.940 --> 00:02:03.420 text. 00:02:06.170 --> 00:02:07.710 OK. 00:02:08.400 --> 00:02:14.530 Now to use the also complete feature we will need to create an also complete object. 00:02:15.180 --> 00:02:16.430 OK. 00:02:18.270 --> 00:02:19.880 And then it will link our inputs. 00:02:20.070 --> 00:02:25.010 So let's call these objects all to complete. 00:02:25.140 --> 00:02:28.710 So we're going to use a constructor called 00:02:32.940 --> 00:02:36.150 auto complete with capital. 00:02:37.690 --> 00:02:38.180 OK. 00:02:38.580 --> 00:02:41.630 So it will take two promises. 00:02:41.700 --> 00:02:49.980 The first Bar-Mitzvah is the inputs which refers to the H.M. elements. 00:02:51.570 --> 00:02:55.860 So this creates that input by 00:02:58.500 --> 00:03:01.290 selecting our input using its ID 00:03:01.300 --> 00:03:07.540 . 00:03:13.770 --> 00:03:14.490 OK. 00:03:14.730 --> 00:03:19.520 And the second barometer is the options. 00:03:20.760 --> 00:03:22.380 So inside those options 00:03:25.140 --> 00:03:31.140 we can define things like the types we want to show 00:03:34.100 --> 00:03:36.170 inside are also complete. 00:03:36.900 --> 00:03:41.140 OK so of got several types we can choose from. 00:03:42.090 --> 00:03:44.040 If we have a quick look at the documentation 00:03:47.040 --> 00:03:51.870 so we can choose from and cause a few there because the code. 00:03:52.040 --> 00:03:52.640 OK. 00:03:52.830 --> 00:03:58.750 Which really turned geocoding results addresses establishment. 00:03:59.820 --> 00:04:00.470 OK. 00:04:00.480 --> 00:04:04.110 Which was an example of business results. 00:04:04.830 --> 00:04:07.440 Also because regions and cities. 00:04:07.590 --> 00:04:11.650 So let's go for cities since we want to show only cities. 00:04:12.120 --> 00:04:24.330 So the scene sucks for cities is going to be between brackets and single quotes CCPs inside penances 00:04:24.830 --> 00:04:25.690 . 00:04:26.370 --> 00:04:30.700 Just like that. 00:04:30.780 --> 00:04:31.050 OK 00:04:36.090 --> 00:04:40.560 now let's save and refresh our page. 00:04:41.930 --> 00:04:44.380 It starts typing something there. 00:04:44.900 --> 00:04:45.800 Now our. 00:04:45.970 --> 00:04:49.410 Also complete is working. 00:04:51.000 --> 00:04:52.300 OK. 00:04:52.320 --> 00:05:01.330 Now we want to censor the map on the new location once we select seats. 00:05:01.500 --> 00:05:03.220 OK. 00:05:03.270 --> 00:05:09.550 So to do that we are going to add a listener to our complete object. 00:05:10.700 --> 00:05:18.300 So we're going to go to the objects first and then we use the listener method. 00:05:19.860 --> 00:05:21.870 So it is going to take a couple of primaries. 00:05:21.870 --> 00:05:24.080 So the first one is the events. 00:05:24.630 --> 00:05:28.360 So in our case the event is called place changed. 00:05:29.220 --> 00:05:29.830 OK. 00:05:30.140 --> 00:05:38.630 And the second trimester is the function to execute unless it's on place changed. 00:05:41.040 --> 00:05:46.520 So let's define this function. 00:05:53.250 --> 00:05:56.820 So for now let's just do something simple let's send an alert message 00:05:59.370 --> 00:06:02.070 with the also completes 00:06:05.430 --> 00:06:11.340 using a method called gets place. 00:06:12.810 --> 00:06:13.510 OK. 00:06:13.870 --> 00:06:23.250 So let's try this if you refresh the page and use the also complete. 00:06:23.250 --> 00:06:27.480 Now we can see that we have Quad's objects and objects. 00:06:27.790 --> 00:06:28.320 OK. 00:06:28.560 --> 00:06:32.640 Now rather than sending an alert message let's print this on the console 00:06:40.750 --> 00:06:47.490 it save it refresh and try again. 00:06:49.130 --> 00:06:50.280 Let's click on F 12 00:06:53.030 --> 00:06:59.370 and then you can see because an object there and inside the object goes if you Elements that. 00:06:59.450 --> 00:07:04.890 And of course one element geometry and then inside the geometry of course the location. 00:07:04.980 --> 00:07:09.220 And this will return the lassitude and longitude and that's what we want. 00:07:09.360 --> 00:07:10.240 OK. 00:07:10.710 --> 00:07:10.980 So 00:07:13.860 --> 00:07:19.050 let's place this inside a variable but we're going to call place 00:07:26.520 --> 00:07:34.440 and then two cents an hour and up in that place we're going to use a method of the month called Band 00:07:34.580 --> 00:07:35.790 2. 00:07:36.700 --> 00:07:38.040 OK. 00:07:39.270 --> 00:07:42.470 So we need to guess the location corresponding to the place. 00:07:42.510 --> 00:07:48.870 So we're going to go to the place variable and then we're going to go to geometry. 00:07:49.230 --> 00:07:49.520 Okay. 00:07:49.530 --> 00:07:50.220 And then location 00:07:54.560 --> 00:07:58.590 and this will return an object with the latitude and longitude. 00:07:58.830 --> 00:08:03.480 So I'd say this is FRESH. 00:08:04.560 --> 00:08:14.830 Let's try this time and now we can see as we are censored in New York let's try again. 00:08:15.210 --> 00:08:16.650 Let's just change the zoom level 00:08:20.460 --> 00:08:21.630 to 7 for example 00:08:28.890 --> 00:08:37.720 .