- [Narrator] In this video we're going to
complete the filter form by hooking up a listener
for our custom event.
Currently, our directory filter's component
emits an event called filter people
whenever the values change but nothing else happens.
A root component needs to listen for that
event and fire a method to do the filtering.
Let's add a method first, call it, update people list.
Let's see, down here, define some methods,
and we'll call this update people list.
This will be a function and we're passing
in the parameters that we're going to search on,
so I'll call an argument, params,
and we'll just put a console message in here to start.
Update people list, fire.
Now we need a listener for the custom event
that can fire this method.
So over here in index.html down around line 122 here,
is my directory filters component.
With don events, we add a listener to the form field
that emits the event.
Likewise, the filter people event is being emitted
by the directory filters component
so we'll add a listener for that here.
And we'll do it the same way we listen for any other event,
we can use the at sign, filter people,
equals and then this will be update people list.
Right?
Yes.
Okay, no we can save this and make sure it's working
so far, so now I will refresh, we'll open
up the developer tools with command option I,
open the console and let's see what happens here.
There we go, update people list
has been fired, every time I type something
or when I change these values
or when I check the box, wonderful.
Let's finish this off.
The method needs to filter the people based on our inputs.
Changing this data value.
I've included a snippet for an implementation
to save us some time over here in updatePeopleList.js
so I'm going to copy this and we'll bring it over
to our update people list function.
So what I'm going to be doing is changing the value
of this.people and now I'll paste in my snippet.
This function goes through each field in turn.
We want to ignore the in turn checkbox if it's clear,
otherwise, check if the person has the intern flag
set to true, both in the params and in the person data.
For the name, if the field is empty,
everybody's included, otherwise, we compare the field value
to the data, making sure everything is lowercase,
and of course with the white space already trimmed
by the .trim bind modifier we used earlier.
And for the titles we have a key that allows for
an exact comparison and of course, if there's no title set
we just let everything through.
And that all is wrapped inside this array. Filter
which looks at each item in the array we're turning through
if that item should be included or not.
Alright, I've saved this, let's switch back
to the browser again and give it another try.
So we'll try typing Tony and everybody else is gone.
Let's try everybody who has an a in their name,
that's going to be a lot of people,
how about an x?
Everybody's gone,
go for all the interns.
Everybody's who's a contractor,
looks like everything is working.
Now the major functionality is finished.
We can filter the people list in real time
based on the form values using a couple event
that we've emitted and handled.