This is the last video in this section, and we are going to finalise our little application, last
part of the program is a search filter.
At first, let's take a look on our finished project and see how such filter works.
When we write you something, then the filter search.
If those characters exist to the list items, it doesn't matter if we write your characters in lowercase
or in uppercase, the filter source, the appropriate items anyway, because it's programmed as case
insensitive.
All right, let's go back to Brackett's and as usual right here.
The comment, search filter.
First of all, before you actually start to program it, you need to select search input element.
So let's go to index dot extremophile.
He will have the form element with ID search note, and it includes the input that we want to select.
OK, let's go back to JavaScript file and write variable search input.
Equals document dot, query selector.
Then pass the ID search note.
And then the input element.
OK, I'm going to attach an event listener to search input element, and also I'm going to use new event,
which is called CHIAPPE.
This event is fired when we release the press key on keyboard.
So let's write search input.
Not at even listner.
Then indicate, as we said, key up and also right, the anonymous function.
I'm going to test it again in council, so right here, council log.
Key is released.
Reload the page and then keep pressing the key for a while, and he said that when I released the key
event is fired.
All right, the next step is to grab the value, which will be enter the inside search input.
So for that, I'm going to create the variable search character.
Let's remove constant dialogue and write the search character.
Again, you need to use event objects and it's property target, so at first pass it as a parameter
and instead function and then write each dot target dot value.
As we have already mentioned, the value that will be entered inside certain inputs should be case insensitive
in order to reach that the value of such inputs and also the text contents of a list items should be
transformed either to uppercase or to lowercase for that in JavaScript.
We have strong methods like two uppercase and two lowercase, and in this case I'm going to use two
uppercase.
So right.
Dots to uppercase.
Let's check in Castle, how this metal works and right to your castle, that look search character.
Reloads, and if you type something in a lower case than this method will transform the values into
uppercase.
It doesn't matter if we type here in lowercase or in uppercase, it will always keep the values into
uppercase.
All right.
You know that we are going to compare the value of such inputs to list items, therefore we need to
select them so right Vah notes.
Equals you will not get elements by Targaryen.
And pass your last item in order to compare the value to each item, you need to use a loop through
the items I'm going to use for each method.
But you can feel free.
And instead of for each use for a loop, it's up to you, as you remember, get elements by target name
returns a collection.
Therefore, we need to transform this collection into a right.
And for that I see a well-known method which you are already familiar with.
So right away that from.
Then possible the variable notes.
Then use forage, right, forage.
Inside the parentheses, right, anonymous function.
And then pass as a parameter note, which should be the current item.
As we said, we need to compare notes, tax the value of such input, and for that we have to grab tax
content of the list items, which belongs to first paragraphs in the least element.
So let's create the variable var part text.
As you see inside forage method, we have parameter note, which, as I said, represents current item
and we need to use it here.
So write notes, Dot.
First element child.
Which is the paragraph in the list item and then text content, so we already have access on the first
paragraph text and now we need to use if statement and the following condition.
So, as you know, we have transformed search and put value into uppercase.
Therefore, we have to transform paragraph, text into uppercase as well.
So.
Right, if that part text.
Not to uppercase.
Now, I want to introduce you to a new string method which will actually help us to search the proper
characters.
This method is called index of for demonstration purposes.
Let's write some examples in order to see how it works.
I'm going to use council, so let's test it.
Right.
Hello.
As a string.
That DOT index of.
And inside the parentheses pass as an argument, one of the characters, let's say H and C, that we
have zero because index of method gives us zero based index numbers.
So it has searched inside the string, the character H, which is the first character in String.
Hello, and therefore it's returned its position as a zero.
So if we change H into L..
It will return to.
Hello, we have to else, but index of method, after finding the first El terminates searching and
returns the position of the first found character.
Besides, if we pass as an argument several characters at the same time, it will return the position
of only the first found character.
OK, if the character doesn't exist in a string, then index of always returns minus one.
For example, use character.
Let's say K.
And you see that we got minus one, OK, index of method also takes into account the sequence of characters.
So if we write here, H0, you see that both characters are included in hello.
But the sequence is incorrect.
Therefore, index of returns minus one as well.
All right, the next thing about index of is that it's case sensitive if we write to your age in uppercase
still, we will get minus one.
And that's the reason why we had transformed values and texts into uppercase.
OK.
I think that it makes sense for programming the search filter, the index of metal is a great tool.
Let's go back to Brackett's and use this method right now, that index of.
And as a parameter, let's insert search character in which we have stored the value of search input.
No, right, not strict equals two minus one.
So if this condition is true, it means that we have found the proper list item, therefore we need
to maintain this item on the page.
So right inside the curly braces note dot style dot display equals to block.
If the condition is false, it means that current item is not matched to search character value.
Therefore, we need to hide it using our statement so right else.
And then notes dot style, dot display equals to none.
OK, reload the page then type, for example, the character F.
And he said that we have only first note because only this item contains character F.
Now, right, the.
And we have second note and third note, because both of them contain the character, the.
Let's recap how the filter actually works, so when I type a single character, for example, I and
release the key, then the event is fired and function is invoked.
JavaScript engine executes the code line by line and when it reaches to foreach loop, then for the
first iteration it will check first list item.
And because of that it contains character I condition inside if statement becomes true and the first
note will be maintained on the page.
Then for a second iteration, the value of note is second list item, again, engine checks by the condition
of your statement.
If it contains character, I.
We know that it does not, therefore, the condition is false, and because of the statement, it becomes
hidden.
Then in the same way, the third largest item will be checked, it contains I therefore it's maintained
on the page as well.
For now, we don't have more items and therefore, Loopt is finished.
All right, congratulations.
We have just finished our project and also this section regarding Don, I'm sure you've got a solid
knowledge and learned lots of things about jump.
But in order to test your knowledge, a little quiz is waiting for you.
So let's go ahead.
Good luck.