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

hi this is Alex from PHP academy' dorg
with a video tutorial for the new Boston
in this video we are going to be looking
at the contains selector in jQuery and
we're going to be producing a small
little application somewhat similar to
this now essentially what we have here
is an unordered list with four names in
now when we type into this box we have
we're going to have a key up event which
is going to return the elements of this
unordered list that contain the value
that I type so for example if I was to
type G you can see that all of these
values are highlighted because they all
contain G if I was to type a you can see
that two of these contain a capital A if
I type a small a all of them contain a
small a so it is case sensitive as well
if I was to type a capital B the second
only contains capital B and I continue
to type that as well the same with
something like D if I was to type al e
Dale Garrett here contains a le so
essentially it's just using the contains
selector in a more dynamic way than if
we were to just highlight something
statically so it's a good example of how
you might you know maybe order things
around depending on what someone types
or like in this case pointing out where
things are so you could have a small
search script I guess let's go ahead and
go over to our text editor let's start
creating our list and creating our box
and then the jQuery code behind it so we
the first thing we want to go ahead and
do is create our unordered list if we go
ahead and just refreshed it blank the
page will go ahead and create this list
it's essentially just going to be an
unordered list with an ID so the idea of
this going to be names and inside each
element we are going to create
obviously a name inside so we'll have
four of these and we'll go ahead and
play some data inside of each one so
Alex Guerra and then we'll say that
Billy Guerra Dale Garrett and Ashley
okay okay so now that we've done this we
know that the idea of this is names and
it looks something like this we're going
to go ahead and inside style.css we're
going to style this so it just looks a
bit nicer first of all not really
relevant but we might as well so we want
the this style to be none and that will
just get rid of the circles the bullet
points and we want to set the padding
and the margin both to zero so set the
margin here to zero and that just pulls
that in a bit so now let's go ahead and
create the so now we can go ahead and
grab the or create rather the input
field where we're going to be typing the
names that are going to match the values
so let's go ahead and just create a
paragraph here and inside create an
input field with obviously the type text
and we'll go ahead and give that an ID
as well so I'm just going to call this
search underscore name so we now have an
input field just up here we can begin to
type values into here which will then
use the contain selector to search the
relevant li or the list element okay so
let's go over to ext dot j s now inside
here we obviously want to wait for the
document to be ready so we use document
ready and inside of here we create a
function that we run once the Dom has
been loaded so the first thing we want
to do is set an event handler to this
search name input field here and what
that will do is it will wait we're going
to be using the key up event handler so
what's going to happen is every time a
key comes up we'll be able to retrieve
the value contained within this text
field
and obviously perform the search so we
use a hash ID selector to select a
search name that's search underscore
name and then we bind the key up if then
handle to this inside we create a
function which will be the code that
runs when every time our key is up
inside of this field and the first thing
we want to do inside of this event is
actually grab the name