in this video tutorial I will talk about jQuery autocomplete and how to do it
from scratch
hey what's up guys, Senaid here from codingpassiveincome.com the place where I
help others to become a web developer much easier and faster then they will do it
and they own so if that is something that interests you consider subscribing so
before we even start with it tore up my college I'm going to explain the basics
that you need to understand for this tutorial so the goal this tutorial is to
create one input this will represent some search query and we will use jQuery
to setup some that's say here key up even so anytime that a visitor put a
focus to this search query and then press anything but his keyboard we will
detect it by using key up even and then in the jQuery + Ajax
we will use it to send all the data to the PHP and then from the PHP we will
use that information and send it to the MySQL database okay and check if there
is any similar result in the database and if there is or it does matter if there
isn't whatever the result is we will use PHP again to return to the jQuery and
then with the jQuery we are going to manipulate this data here so we will
once we return the response and PHP below here let's say like this
we will show what we have in our database so if we for example have some
data we will display his by using lists and if we don't we will say here
no records founds okay and this is that what is jQuery autocomplete so
anytime the visitor enter something here small pop-up will be here and we will
have the result whatever it is but this is just how we need to do it and now
before I even start the tutorial I like the explane the last thing and it is the
query that you will need to use inside MySQL that will does find all
similar results so the query is SELECT
some column name let's say name FROM and here we need to specify the table name
let's say country WHERE and we can use the column again name like and here we
need to specify what you're looking for and we will say percent some query
percent again so what it mean anytime and use percent okay it means that
anything before this will be ignored and anything after this will be ignored
so if a visitor entered just one card to five doesn't matter you are going to
search only for that few characters we are not looking for the entire name so
once again it is SELECT column name, FROM table name
WHERE column name LIKE "%q%" and that's it it's very simple
so let me I'll show you how to do it.
So now I'm here at my PHPstorm and I have
created a new empty project PHP autocomplete also I have images' folder it
is loading.gif file I have resources this is country SQL file let
me show you what is so basically I have just written to query this way will
create an empty table with the name country and here is the insert command for the
MySQL and he told us inside some countries
okay there's 50 countries or so just for the purpose of this tutorial so I'm
going to import this file and if you need it if you need the code of this
tutorial you can find in the descriptions below it will include an
SQL file this loading etc and also I have one empty index.php file also I
have started my XAMPP server so this is that the default setup that you need
for some project nothing special so now I'm going to create a new database I
will say jQuery autocomplete I will choose here utf8_unicode_ci I am
going to import this country.SQL file okay go
and everything is looking good so now there are one table country and there
are some countries so the first thing that we are going to do is we will
create a normal HTML document so I will start by typing HTML head in the head I
will have in this title let's say
autocomplete and in the body
okay so we will ned one input so I can say input type will be 'text let's say
please hold a little bit search query and ID I will say search box okay and
that's it now we need to include jQuery library so I will go to the code.jQuery.com
and here have all the of the jQuery I'm going to
use the latest so I'll just use the minified and you all need to do this to
copy this part here or to click on this button here whatever you like and I'm
going to paste it just before the closing body tag and now we are going to
write of course the jQuery code so I will say text/javascript and now I'm
going to see the last time document.ready function and what is this meaning
it means that they will wait until the document is loaded which means all HTML
elements are loaded PHP has finished whatever it does and now we are starting
to use jQuery and setup some even on the HTML elements so on the search box
like I said on my whiteboard ah we will setup select a search box and they will
set up keep up even we can use on key up or keep up but every white function and
here we are going to just write the code so I will say console.log and we are
going to get so I can do it is that's making input to understand or query
equal this which means they are creating query variable and inside this query
variable fill to the data that is inside this search box so we are using hashtag
which means ID this one and then the name of the ID which is this and you
are calling the method val() so now let's try just to use the console
log to print whatever inside this way so let me now try to open this and
made a mistake I said PHP autocomplete instead of jQuery but ignored
so let's see will this work and as you can see now
you can see what is happening each time when we press the key on our keyboard
they will get whatever is inside this search box and they are going to display
right here inside the console log so this is just very simple and easy to do
so now what we need to do we need to validate this query so what I usually do in
my project I'm expecting at least two or three characters because I don't to send
so many requests to our server so I can say if querylenght>2
which means we expecting three characters we'll do this otherwise we
are not going to do anything so we can test that too
see so as you can see now there is one character and nothing is happening there
is two characters nothing is happening there is three characters and there is asd
so let me just I have this plugin here that is making those console logs
let me now this and as you can see now only the 3+ characters will be
there which is the to prevent a lot of ourserver and here we need to write
Ajax code that will send the data to the PHP and then inside PHP we are going to
accept and checking the database so we will say Ajax and here we are going
to create an object and let's say we will need URL which is I will use the
same file index.php it will need some method I will use post it can use post
or get there is some data that we need to send so I can say here search one I'm
sending this just to know in PHP I'm doing Ajax code and Here I am
going to send the data so I can say query then that it that is enough and
then I'm going to use success function data so what this means is if this
Ajax code is success the part of the code that is here okay, will be executed
okay and down here I'm going to say this data type that will be told by the PHP
I will just saay text okay and now let's say console log
what the whatever the PHP returned and now let's write the PHP code
I will do it here and I will say
if(isset $_post[' search']) whenweI sent on Ajax
to the PHP will expect search and if isset will execute the part of the code
here so we can for now say response=" NO data found" and you can
see he exit it means it will stop executing this page and will return to
the Ajax this response so with that this part like to refresh so now I will say
like this and says no data part and in the network we can see what this what
has happened we have sent as you can see we have created Ajax code and said
the data to the index.php file and here is the response ok which means that this
part is looking good we have created a search box we are using very query for
this and you are sending the call to the PHP so now inside PHP I'm going just to
connect to our database so I will say
connection=new mysqli( localhost our username is
root our password is an empty and here I'm going to specify the database name) so
what we said that all their business is jQuery autocomplete so I will say jQuery
autocomplete and that's it now here we need to accept this query so I will
create new cariable $q=$_POST['q'] ok and now
this query we need to escape does to protect for the MySQLi injection so
we'll say here real escape string and here that's it so now this is the basic
protection but in the most cases it will do the job and now we need to execute
SQL query that I have written on the whiteboard to see do we have any similar
result so I will say $sql=connection query (SELECT name FROM country
WHERE name LIKE'%q%' is 2 times
percent and between I will say query if sql club non throws beaker than zero will
end it to this party which means if there is some data inside our table they
are going to execute this part of the code and here before we do that I want
to create a list so I can say here <ul><li>and i'm going to close those two
let's show what I want so here else if we want this ID response
and we are not going to print data inside the console will say response.HTML
so it when PHP returns something we will inside this this put all the data
so let's just quickly test what I want to accomplish so let's see here
there is no data found which is what are what they are looking to do so let me
now just make this a little bit nicer so I will write quickly style
type text okay and here I would just say
float left list-style-none
so I'm not that's the planning 0 pixels so let's
see what is the result so it's not looking much better and now has declared
us a border
let's test this again
so this is us the basic CSS does to make it look nicer okay nothing special so
now it looks much nicer and now let's get to the PHP again so now if we have
some data inside database I will say here while let's say first $response="<ul>"
like this and
like this and inside we will say while data = $sql->fetch_array
array will say he response.=it means you learn concatenation of the
string and I will say like this and here I'll say open company data and now
the name of our column which means they are everything from this row putting
into this and we are accessing because it is an array that will access data
here and now let's make a test so say he sees no data found but let's see some
country name and as you can see now in the pop-up it says a Afganistan because we
have this query we can't reach this here but they >1
or >0 that to make sure because they don't have a lot of
countries that can see when I test a this is the link of all the countries we
see like this because he in the Albania there are two characters because you are
using percent it will really remove all the all the characters before and after
so that is why we are goting this but if we continue to type as you can see it
will filtered only what they are looking for so if we try something else okay
there isn't we try like this so now this is just autocomplete and now the last
thing that we need to do as you can see now I can click on this and nothing is
going to happen so I'm going to setup sub some event so when someone click
here it will automatically select that and it will remove this pop-up so we can
say here
document.on so I will say here click on <li> you pull a function and let's
say here what it will read so I'll say this
which means I'm pointing on this exact element in the list so let's say I will say
var country.text and this time I'm not using the boat because I
want to read this here inside so this is not input so I can't use a method wall
like I did here so and let's say inside search box I will put this I will say
country and also I'm not going to clear this response so I will say response.html
empty let's test this
and if I now click for example on this one it will select anything to remove
the rest but what we will need also it will be better if there is leave our so
let's say text or that we can say color let's say silver
so now do this and if we go as you can see now it follows our mouse okay we
can also say background
so let's say like this
and now it is looking really nice it for so long and also if we quit click it
will select and remove all others so now we can start typing you'll find ok let
me do it slower and it works really nice and this is it okay so this is guys I
hope so very simple tutorial there even a lot to understand in this tutorial but
you need to follow some rules and apply some basic things so if you have any
questions please post in the comments below and I will make sure to go to all
of them and answer all the questions and if you like this tutorial please like it
and share with your friends take care
For more infomation >> Expect hot weather until Sunday - Duration: 1:44. 
Không có nhận xét nào:
Đăng nhận xét