PHP Autocomplete Tutorial Using JQuery

Autocomplete Php is a cool technic you should learn to make your website or you web application looks cool and also user friendly. As you might have known, autocomplete gives a user a list of nearly same data with what he or she is looking for.

In this tutorial we will learn together about how to use this technic in our sample web app using PHP and JQuery. Before we go to the tutorial, first we make a list of our need to build this app.

Our application will only have one page, that is a form where user try to input a data. In this form the magic happens. When user inputs data, an autocomplete will show up to help him/her fulfill the form. We will create 2 PHP files, one for the form and one that is responsible in supplying data into an autocomplete. We also have a database with a table named “student” that has 2 columns, “id” and “name”.

Now, let’s make our hand dirty by writing the code :D. Prepare your self!

First we make our database tabel. Here is the structure of our “student” tabel

+-------+-------------+------+-----+---------+----------------+
| Field | Type        | Null | Key | Default | Extra          |
+-------+-------------+------+-----+---------+----------------+
| id    | int(5)      | NO   | PRI | NULL    | auto_increment |
| name  | varchar(50) | NO   |     | NULL    |                |
+-------+-------------+------+-----+---------+----------------+

Next we make our main form page.
autocomplete.php

<html>
   <head>
		<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        <link rel="stylesheet" type="text/css"
        href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />

		<script type="text/javascript">
                $(document).ready(function(){
                	$("#name").autocomplete({
                		source:'getautocomplete.php',
                		minLength:1
                	});
                });
		</script>
   </head>

   <body>

      <form method="post" action="">
             Name : <input type="text" id="name" name="name" />
      </form>

   </body>
<html>

note that we bind the “name” which is the id of the text input into jquery function in $(“#name”). In autocomplete function inside jquery, we use two properties, source and minLength. Source is the file that supplies our data to be shown in autocomplete. minLength is used to specify the number of character a user has to type to activate the auto completion.

Now we make our “supplier” file.
getautocomplete.php

<?php
 mysql_connect("localhost","root","");
 mysql_select_db("php_autocomplete");

 $term=$_GET["term"];

 $query=mysql_query("SELECT * FROM student where name like '%".$term."%' order by name ");
 $json=array();

 	while($student=mysql_fetch_array($query)){
         $json[]=array(
         			'value'=> $student["name"],
         			'label'=>$student["name"]." - ".$student["id"]
         				);
 	}

 echo json_encode($json);

?>

That code should be easy to understand. The things you have to get attention are the $json array values, ‘value’ and ‘label’. ‘value’ is as the value of the input text, where ‘label’ is used as label text in auto complete. You will know what i mean later.

Now insert some data to your database as a sample. Then navigate your browser to
localhost/yourprojectname/getautocomplete.php
you should see the data in json format

php tutorial

don’t worry about the warning text, it’s only because we didn’t supply the variable with a value.

Try to make some changes by navigating your browser to
localhost/yourprojectname/getautocomplete.php?term=whatyouwanttosearch
Change the whatyouwanttosearch with some name of students and now you should understand 😀

Now is the time to test our app. Go to
localhost/yourprojectname/autocomplete.php>
and type some letters. Here’s what i got

php tutorial

What you see in pop up auto complete is “label” we talked about some mintues ago. Click one of those data and what inside text input is “value” we talked above.

value

Okay, see you in next cool tutorial 🙂
Don’t hesitate to discuss with me by using comment feature in this article

Advertisements

60 thoughts on “PHP Autocomplete Tutorial Using JQuery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s