Beginner PHP Tutorial - 175 - Auto Suggest Application Part 1 Video Lecture | PHP for Absolute Beginners: From Novice to PHP Master - Web Development

hi this is Alex from PHP academy' 2 org
and this is a video tutorial for the new
Boston now in this video we're going to
be looking at Ajax and using a get
request to a specific page in order to
return an auto suggests style search box
so you may have seen on Google if you
use Google as a search engine you may
see that when you type in a value where
you start to type in a value you will
actually receive a list of recommended
results based on what you've typed so if
I was to start typing in pH it may
automatically suggest PHP for me because
this is a popular result and it is
displayed underneath the text box now
there's a couple of things we won't be
doing in this tutorial because this is
just demonstrating how we can use Ajax
with PHP we're not going to be using CSS
to make everything pretty because we're
going to be focusing on the Ajax
relative to the PHP what we're also not
going to be doing is searching it by
popularity what we're going to be doing
is we're going to use a a an SQL query
to match or store or match every every
time we press a key down so if I'm
typing PHP here every time we press the
key we're going to match what we've
already got to the rest of a string
inside a database so let me just make
this a bit clearer let me just open up
my database that I've already created
okay so if you haven't already created a
database go into PHP myadmin or whatever
you use to administer your MySQL
database and you want to create a
database called Ajax or something of
your choice but just remember I'm going
to be using the name Ajax now we need a
table inside of this database called
names or obviously whatever you choose
to call it but remember to add it in in
the tutorial
in the substitute of what I've named it
and we have two field names we've got ID
and we've got name now idea is just
something I always tend to put in a
database just to keep track of how many
records there are and also also the
ordering of which each record was
entered so you can see that I've got a
few names that I've already entered in
let's just take a look at the database
structure so you can you can see how to
set this up
we've got ID which is a primary key and
it's an auto increment so every tummy in
insert a record it will it will
increment this value and name is just a
variable character of 40 so that's all
you need to do and then you want to put
some dummy data inside your database
inside your table sorry and the data
that you want to put in is that the data
which you know put a few names in first
of people you might know etc and then
choose a name that already exists but
with say a different surname for example
so when we start to type let's just go
back to context when we start to type
Alex like that
we'll get Alex Garrett and Alex Malcolm
returned and then when we continue to
type we might have Alex ji then Alex
Malcolm will no longer match what we've
currently typed so Alex Garrett will be
returned so hopefully that makes sense
if you can though add as many rows as
you can in here as many records as you
can in here to get the best effect from
this possible so what we're going to be
doing is we're just going to be creating
a text area or a text input box first of
all and we're not going to have a submit
button obviously because as the user
types we want the autosuggest to work so
we're going to do this via Ajax and our
search Inc dot PHP file is going to do
the searching for us so an index dot PHP
let's just set up first of all our page
the head of our page the body of our
page then we'll set up the the area that
the user can type in we'll also then set
up the div area where the results will
be shown so let's go ahead and create
our HTML root tags let's go and do the
head tags just underneath the
and body so obviously feel free to
properly set up your document I'm just
keeping this really clean and simple for
the purposes of this tutorial so embody
the first thing we want is a forum we
don't need an action and we don't need a
method because we're not posting this
form this form is just going to add the
reason we create in this form is so we
can access the elements inside the form
so I'm going to give it an ID and I'm
also going to give it a name so the name
and the ID we're just going to call this
search and I'm going to add my form
there so inside the form I want some
text to tell me what to do so I'm going
to say type a name and then underneath
that I'm going to have an input box and
this is type text the name of this can
be a keyword because this is the place
where we're typing keywords and then we
want this on Mouse down up sorry sorry
on key down what do we call it a event
so we want an on key down event and what
we're going to do is every time a key is
pressed so every time we're in focus on
this in this let's just preview it so I
can explain a bit better so every time
we're in focus on it um we can we'll
click in here and we'll start to type
something and every time we press a key
down so I'm pressing a key down now the
the Ajax page where all the Ajax code
will load in this this search - in PHP
page that we have here so let's go ahead
and make up the name of our function now
so we can put that into our JavaScript
in a moment so I'm going to call this
[Music]
find match we'll call it find match
okay so obviously now that we have this
find match function we're going to need
to add that function up here a bit later
on inside JavaScript so let's go and
create our div we need to create an ID
for our div as well because remember
within the Ajax we get this element by
its ID and then we load some HTML into
this this HTML is going to be the return
values that we find from search string
PHP