WEBVTT 00:01.830 --> 00:07.490 This is the last video in this section, and we are going to finalise our little application, last 00:07.500 --> 00:09.890 part of the program is a search filter. 00:10.980 --> 00:16.560 At first, let's take a look on our finished project and see how such filter works. 00:17.100 --> 00:20.560 When we write you something, then the filter search. 00:20.610 --> 00:28.110 If those characters exist to the list items, it doesn't matter if we write your characters in lowercase 00:28.110 --> 00:34.360 or in uppercase, the filter source, the appropriate items anyway, because it's programmed as case 00:34.380 --> 00:35.070 insensitive. 00:36.070 --> 00:40.670 All right, let's go back to Brackett's and as usual right here. 00:40.690 --> 00:43.450 The comment, search filter. 00:47.830 --> 00:53.010 First of all, before you actually start to program it, you need to select search input element. 00:53.680 --> 00:56.230 So let's go to index dot extremophile. 00:57.390 --> 01:04.020 He will have the form element with ID search note, and it includes the input that we want to select. 01:05.410 --> 01:10.170 OK, let's go back to JavaScript file and write variable search input. 01:13.170 --> 01:15.960 Equals document dot, query selector. 01:19.730 --> 01:22.280 Then pass the ID search note. 01:25.460 --> 01:26.780 And then the input element. 01:31.170 --> 01:39.300 OK, I'm going to attach an event listener to search input element, and also I'm going to use new event, 01:39.300 --> 01:40.560 which is called CHIAPPE. 01:41.370 --> 01:45.210 This event is fired when we release the press key on keyboard. 01:45.840 --> 01:47.760 So let's write search input. 01:50.230 --> 01:51.790 Not at even listner. 01:54.060 --> 02:00.660 Then indicate, as we said, key up and also right, the anonymous function. 02:05.000 --> 02:09.260 I'm going to test it again in council, so right here, council log. 02:11.740 --> 02:12.910 Key is released. 02:15.830 --> 02:22.820 Reload the page and then keep pressing the key for a while, and he said that when I released the key 02:22.820 --> 02:23.840 event is fired. 02:25.780 --> 02:30.930 All right, the next step is to grab the value, which will be enter the inside search input. 02:31.240 --> 02:34.440 So for that, I'm going to create the variable search character. 02:35.290 --> 02:39.400 Let's remove constant dialogue and write the search character. 02:43.220 --> 02:49.920 Again, you need to use event objects and it's property target, so at first pass it as a parameter 02:49.920 --> 02:56.930 and instead function and then write each dot target dot value. 03:00.360 --> 03:06.300 As we have already mentioned, the value that will be entered inside certain inputs should be case insensitive 03:06.900 --> 03:13.500 in order to reach that the value of such inputs and also the text contents of a list items should be 03:13.500 --> 03:19.720 transformed either to uppercase or to lowercase for that in JavaScript. 03:19.740 --> 03:26.760 We have strong methods like two uppercase and two lowercase, and in this case I'm going to use two 03:26.760 --> 03:27.390 uppercase. 03:27.810 --> 03:28.410 So right. 03:28.410 --> 03:30.180 Dots to uppercase. 03:33.860 --> 03:41.150 Let's check in Castle, how this metal works and right to your castle, that look search character. 03:44.560 --> 03:52.750 Reloads, and if you type something in a lower case than this method will transform the values into 03:52.750 --> 03:53.350 uppercase. 03:53.910 --> 03:59.980 It doesn't matter if we type here in lowercase or in uppercase, it will always keep the values into 03:59.980 --> 04:00.610 uppercase. 04:02.630 --> 04:03.140 All right. 04:05.330 --> 04:12.710 You know that we are going to compare the value of such inputs to list items, therefore we need to 04:12.710 --> 04:16.490 select them so right Vah notes. 04:18.420 --> 04:24.210 Equals you will not get elements by Targaryen. 04:28.340 --> 04:36.530 And pass your last item in order to compare the value to each item, you need to use a loop through 04:36.530 --> 04:39.850 the items I'm going to use for each method. 04:39.860 --> 04:41.690 But you can feel free. 04:41.690 --> 04:48.680 And instead of for each use for a loop, it's up to you, as you remember, get elements by target name 04:48.680 --> 04:50.340 returns a collection. 04:50.870 --> 04:53.990 Therefore, we need to transform this collection into a right. 04:54.410 --> 04:59.160 And for that I see a well-known method which you are already familiar with. 04:59.570 --> 05:01.970 So right away that from. 05:05.160 --> 05:07.200 Then possible the variable notes. 05:09.420 --> 05:11.850 Then use forage, right, forage. 05:13.790 --> 05:17.090 Inside the parentheses, right, anonymous function. 05:18.540 --> 05:25.350 And then pass as a parameter note, which should be the current item. 05:27.990 --> 05:34.440 As we said, we need to compare notes, tax the value of such input, and for that we have to grab tax 05:34.440 --> 05:39.770 content of the list items, which belongs to first paragraphs in the least element. 05:40.050 --> 05:43.320 So let's create the variable var part text. 05:45.710 --> 05:51.470 As you see inside forage method, we have parameter note, which, as I said, represents current item 05:51.980 --> 05:53.580 and we need to use it here. 05:53.840 --> 05:56.090 So write notes, Dot. 05:58.090 --> 05:59.440 First element child. 06:03.180 --> 06:11.130 Which is the paragraph in the list item and then text content, so we already have access on the first 06:11.130 --> 06:16.080 paragraph text and now we need to use if statement and the following condition. 06:16.960 --> 06:22.070 So, as you know, we have transformed search and put value into uppercase. 06:22.480 --> 06:26.540 Therefore, we have to transform paragraph, text into uppercase as well. 06:27.190 --> 06:27.580 So. 06:27.580 --> 06:31.060 Right, if that part text. 06:33.250 --> 06:34.690 Not to uppercase. 06:40.220 --> 06:46.190 Now, I want to introduce you to a new string method which will actually help us to search the proper 06:46.190 --> 06:46.820 characters. 06:47.450 --> 06:51.890 This method is called index of for demonstration purposes. 06:51.890 --> 06:55.080 Let's write some examples in order to see how it works. 06:55.970 --> 06:59.870 I'm going to use council, so let's test it. 07:00.290 --> 07:00.770 Right. 07:00.820 --> 07:01.300 Hello. 07:01.520 --> 07:02.630 As a string. 07:05.260 --> 07:07.600 That DOT index of. 07:11.520 --> 07:19.680 And inside the parentheses pass as an argument, one of the characters, let's say H and C, that we 07:19.680 --> 07:25.420 have zero because index of method gives us zero based index numbers. 07:26.250 --> 07:32.280 So it has searched inside the string, the character H, which is the first character in String. 07:32.280 --> 07:36.490 Hello, and therefore it's returned its position as a zero. 07:37.080 --> 07:39.900 So if we change H into L.. 07:41.550 --> 07:42.960 It will return to. 07:45.580 --> 07:53.830 Hello, we have to else, but index of method, after finding the first El terminates searching and 07:53.830 --> 07:56.420 returns the position of the first found character. 07:56.980 --> 08:03.640 Besides, if we pass as an argument several characters at the same time, it will return the position 08:03.640 --> 08:06.080 of only the first found character. 08:08.320 --> 08:15.990 OK, if the character doesn't exist in a string, then index of always returns minus one. 08:16.570 --> 08:18.310 For example, use character. 08:18.700 --> 08:19.780 Let's say K. 08:22.200 --> 08:30.940 And you see that we got minus one, OK, index of method also takes into account the sequence of characters. 08:31.560 --> 08:39.610 So if we write here, H0, you see that both characters are included in hello. 08:40.020 --> 08:41.520 But the sequence is incorrect. 08:41.940 --> 08:44.780 Therefore, index of returns minus one as well. 08:47.280 --> 08:56.130 All right, the next thing about index of is that it's case sensitive if we write to your age in uppercase 08:57.690 --> 08:59.520 still, we will get minus one. 09:00.750 --> 09:05.970 And that's the reason why we had transformed values and texts into uppercase. 09:07.260 --> 09:07.650 OK. 09:08.990 --> 09:15.200 I think that it makes sense for programming the search filter, the index of metal is a great tool. 09:16.500 --> 09:21.120 Let's go back to Brackett's and use this method right now, that index of. 09:23.640 --> 09:30.120 And as a parameter, let's insert search character in which we have stored the value of search input. 09:33.260 --> 09:38.750 No, right, not strict equals two minus one. 09:42.320 --> 09:48.410 So if this condition is true, it means that we have found the proper list item, therefore we need 09:48.410 --> 09:50.340 to maintain this item on the page. 09:50.840 --> 09:59.090 So right inside the curly braces note dot style dot display equals to block. 10:03.490 --> 10:09.560 If the condition is false, it means that current item is not matched to search character value. 10:10.120 --> 10:14.410 Therefore, we need to hide it using our statement so right else. 10:16.240 --> 10:23.680 And then notes dot style, dot display equals to none. 10:26.460 --> 10:32.160 OK, reload the page then type, for example, the character F. 10:33.760 --> 10:39.730 And he said that we have only first note because only this item contains character F. 10:41.520 --> 10:42.500 Now, right, the. 10:43.790 --> 10:49.240 And we have second note and third note, because both of them contain the character, the. 10:53.050 --> 11:01.900 Let's recap how the filter actually works, so when I type a single character, for example, I and 11:01.910 --> 11:06.670 release the key, then the event is fired and function is invoked. 11:07.930 --> 11:16.300 JavaScript engine executes the code line by line and when it reaches to foreach loop, then for the 11:16.300 --> 11:19.990 first iteration it will check first list item. 11:20.830 --> 11:27.790 And because of that it contains character I condition inside if statement becomes true and the first 11:27.790 --> 11:29.890 note will be maintained on the page. 11:31.680 --> 11:39.840 Then for a second iteration, the value of note is second list item, again, engine checks by the condition 11:39.840 --> 11:40.980 of your statement. 11:40.980 --> 11:42.630 If it contains character, I. 11:43.660 --> 11:50.230 We know that it does not, therefore, the condition is false, and because of the statement, it becomes 11:50.240 --> 11:50.710 hidden. 11:52.480 --> 11:59.740 Then in the same way, the third largest item will be checked, it contains I therefore it's maintained 11:59.740 --> 12:00.620 on the page as well. 12:02.380 --> 12:06.490 For now, we don't have more items and therefore, Loopt is finished. 12:08.560 --> 12:11.900 All right, congratulations. 12:11.920 --> 12:18.490 We have just finished our project and also this section regarding Don, I'm sure you've got a solid 12:18.490 --> 12:21.640 knowledge and learned lots of things about jump. 12:22.120 --> 12:26.390 But in order to test your knowledge, a little quiz is waiting for you. 12:27.220 --> 12:28.360 So let's go ahead. 12:28.510 --> 12:29.050 Good luck.