jQuery and AJAX Tutorials 42 | jQuery Search Example Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

hey what's up guys my name is Ilias and
this is your forty second tutorial and
in this tutorial we want to make this
search function work well right now it
doesn't work as you see so I'll just go
ahead and make it work
first we have to set this inputs ID to
something so I'll just name it search so
we can track it and then I would like
you guys to go to the script dodges
document and create a new selector on
this search which we just created search
and the event we are going to work with
is key press so when the key is pressed
on the search the following code should
run and you just type function so on
here we can let our magic happen just
create some space so the first thing we
have to do we have to store their
current search query so pretty much the
current content of this search box so
just create a variable called current
query very like jQuery and set it equal
to the search dot Val so what is search
that well means just basically the value
of the search box and you can actually
replace the search by this but then it
gets like less understandable so we want
to write the code which is very
understandable and then we have to
compare this search query with all the
list elements with all these list
elements and you remember once we use
this function to loop through all the
elements which was this each function so
we just go ahead and say portfolio Li
dot each which will just automatically
loop through all this Li elements for us
so we just go ahead and store the
current the current elements the current
elements keyword so let's just create a
variable and just I'll just call it
current
current keyword and set it equal to this
dot attribute and the attributes name is
data keywords so I'll just copy that and
paste it right here so now we just
basically loops through all these
elements and sequentially fetch the
speech castle Palace White House Church
and stuff so this is what what we are
going to do and then we need to compare
the two queries of course we need to
check if in our member in one of the
tutorials on chat bot we had this
built-in function called index so just
in our case we are searching for query
in the keyword and so there will be keep
current keyword that index of and here
in this brackets we just type the text
which we are looking for and we're
looking for the current query so we're
looking for the user input in this
keyword and it should it should be less
or greater or equal than zero so of
course we need to create an if statement
for it so if a class or equal than zero
or two to zero that means that we
actually found this search criterion
search query in the keyword in one of
the elements and we can just go ahead
and display that on the screen so just
say this show but before we show this
element we make sure we hide the rest
so basically when I start typing my
request I want first the illness to be
hidden so I'll just go ahead and copy
this lecture and just say height just
hide all these entries first so I think
this code should work and let's just go
ahead and test it
I know that this picture has a keyword
gnash nature but it doesn't have a
keyword it's it's a beach actually Beach
yep it works and one of the pictures has
a keyword of White House or something
yep and while I'm the cue when the
pictures has if you were a water and we
actually found this water and this is
how simply you can create a search using
jQuery so how we do that you just store
your query to your variable you hide all
the all the elements then you loop
through each element and you compare the
search query with a keyword so you're
just looking if you're just pretty much
looking for your query in this keyword
and if it's there you can show this
element but right now of course we have
a problem that when I type something
like nature like I don't know beach and
then I just erase this beach search
search query I'm not going back to the
previous state so this is something we
want to do in the next tutorial so I
hope you guys had fun making this church
with me so in next tutorial we'll just
finish this search functionality and
then we are down with this portfolio so
I hope you guys liked this tutorial and
I'll see you guys the next one