jQuery Tutorial - 24 - Contains selector Video Lecture | Importance of jQuery in Website Development - IT & Software

so we create a new variable called
search name and that will be equal to
this ie referencing back to the search
name field and then we want to grab the
value using dot Val so every time we
have a key up we then want to search for
that search for the fitter the search
name variable inside of this Li here so
inside this names unordered list and we
want to search for each Li so we need to
use a selector hash names obviously
because the ID of the unordered list is
names and then we want to say space Li
and then inside of this we want to say :
contains and then in brackets we want to
have a value so I'm actually going to go
ahead and change the single quotation
marks on the outside to double quotation
marks and on the inside here is the
value that we're searching for and this
will only select the Li element inside
of our names unordered list where this
value is contained so we can append on
the search name value and then we can
add a class to this you know obviously
depending on which value has been
matched through what's been typed so
we're going to go ahead to style dot CSS
and create a new class called highlight
and that's just going to be setting the
background color to yellow so background
color yellow and that will just
highlight the area behind the Li and we
can go ahead and then input highlight in
there so now what's going to happen is
when we refresh and type say for example
capital a you can now see that all the
Li elements that contain this value
using the contain selector we add the
class highlight to so we're not actually
performing a search we're just using an
advanced selector to select particular
elements now when we get rid of this
we've got a problem because we've
highlighted everything now
and that's because we have actually
matched nothing inside of this contains
therefore we've selected all Ally
elements so the first thing we want to
do is we want to set up a if statement
here that that will create a condition
based on whether this contains anything
so what we want to do is say if search
name doesn't equal nothing so if it
doesn't equal nothing then we can
perform the search the only problem is
now that if we were to say for example
type a and then back again that's fine
but when we when we type a space we have
the problem that highlights everything
again so a round search name we use
jQuery trim and this will just trim
white space from the left and the right
hand side of the string so now we can do
as many spaces as we want inside of this
box as well as typing characters going
back again and obviously we don't get
the highlighting everything effect now
the only other issue here is that when
we do return to nothing the class is not
removed so just before we actually add
this class we want to go ahead and
remove this class beforehand so let's
just pull everything up to make it look
a bit neater and here what I want to do
is I want to select user selector with
names and all li elements and I want to
remove the class highlight from these
and what that will do is is every time
we have a key up it will remove the
class and then add the class if
necessary so we'll get a more
streamlined effect of highlighting each
element so if I was to type a and then a
backspace obviously that a backspace and
you know no nothing in here has matched
so we've removed the class and we
haven't then gone on to add another
class if I then type Alex it highlights
Alex by type of capital B it highlights
the line with Billy in it and again I
will select all of them so you know
something like this is quite useful if
you have a list of say database table
generated elements in an unordered list
it could be a list of data that you will
you know wish your user to search
through it could be absolutely anything
but the contained selector and
case we've made more dynamic and given a
better example rather than just
highlighting something statically we've
given the user the option to type
something in so this is just an example
of how it can be applied however
obviously contains can be used for other
different elements it doesn't have to be
alike with paragraphs spans divs
anything at all
so the contains selector in this case
we've used to look inside Li elements of
an unordered list