jQuery and AJAX Tutorials 43 | Finishing the Search Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

hey what's up guys my name is Elias and
this is your 43rd tutorial and this
tutorial we are going to finish this
search function as well as we are we are
about to finish working on the jQuery
portfolio and this is for real well it
sounds sad but I hope you guys like this
portfolio and stuff so let's just go
ahead and make this search work properly
well now it works now we can search for
the stuff but usually when you have such
a search box and you just press
backspace just to erase the search query
you usually go back to the normal state
where you see all the pictures Hannah
now will just do that this function so
that you can just go back so the thing
is we want to track the backspace the
backspace pressed button and this key
press function which we used doesn't
support backspace or delete so we can
replace it to key up function and this
key up function works in every case and
then we have to only check if the search
query is empty and when it's empty and
you press backspace for instance it
should just show the elements back we'll
just do that so we already fetch the
current query from the search dot Val
and now we can just check if this
current query is not empty well like
this like so so when it's not empty we
can run our code which we wrote in a
previous tutorial but first I will style
it a little bit because it doesn't look
good yeah now it looks better but else
when the search query is empty we can
make the elements appear back so just
copy this line of code very where we
hide it and do the opposite of hiding
which is showing like this so the idea
is the following we just type a search
query and then we just press XP
or delete and the search query is empty
for instance and then this code should
run and this code will just show all the
portfolio items back so just go ahead
and test it I'll just type water water
and I see this nice picture this water
was bold and then I know I'm just
pressing backspace backspace backspace
backspace backspace backspace and now we
go back so that's it for this tutorial
well it's it is a very short tutorial
but now we officially finished this
jQuery portfolio and if you guys want to
add some new features to that well I
hope you can come up with some good
ideas and stuff and well this portfolio
is actually not perfect you can add lots
of features you can replace the small
images by thumbnails and stuff and you
can do lots of cool stuff and if you can
program PHP you can even make the
elements appear by just simply copying
them to a folder and stuff well you can
do lots of things but all this the
purpose of this dickerer portfolio was
only to teach you guys the basics and
like the most interesting functions
which we have in jQuery and I hope you
guys like this jQuery portfolio and in
the next tutorials we'll learn something
about Ajax and the reason why we didn't
had a block of tutorials in a row for a
jaques is I just didn't want to over
overwhelm you guys who's almost
adjective because it's very abstract and
I started that I just decided to make
some little a jaques functions so that
you just know how a Jaques works and
still have fun because you see what it
does so in those tutorials we will learn
some magic some more and of course by
the end we'll just make a quick review
and just take a look at what you guys
learned in this tutorial set because
well currently this is 43rd tutorial and
we are heading now towards the end and
we have only 7 tutorials left but if you
guys were following
you did a good job anyway you learned a
lot on jQuery and you're actually able
of creating out a nice website because
you also saw me coding CSS and HTML and
stuff and if you have any questions
about this portfolio about this
functionality or filter or fade in and
fade out overlays or queries and I can
drop a server-side storing the images to
the file you can just go ahead and ask
me questions in the commands and I'll be
looking forward to answer them and I
also hope you guys can take advantage of
this portfolio and create your own
website where you just can store your
pictures and stuff or if you're an
artist or a photographer we can store
your private pictures in a very nice way
so thanks for watching guys and thanks
for doing this portfolio with me so I'll
see you guys in the next tutorial which
is going to be a little bit different