Autocomplete PHP Tutorial Using JQuery

5

Autocomplete Php is a cool technique you should learn to make your website or you web application looks cool and also user friendly. As you might have known, auto complete 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 autocomplete php technique 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

Next we make our main form page.
autocomplete.php

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

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

Autocomplete PHP

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 Autocomplete PHP app. Go to
localhost/yourprojectname/autocomplete.php>
and type some letters. Here’s what i got

Autocomplete PHP

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.

Autocomplete PHP

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

Facebook Comments
 

Agung Setiawan

Agung Setiawan adalah software engineer di BukaLapak.com, penulis sekaligus pecinta sastra, dan pembaca buku

 
Halo, perkenalkan saya Agung Setiawan.
Saya Software Engineer di BukaLapak.
Simak pemikian saya soal dunia Software Engineering via Twitter di @agungsetiawanmu dan facebook
Blog ini saya update seminggu sekali jadi sering-sering saja mampir
Mau belajar Vim bareng saya?
Belajar ngoding dari nol menggunakan PHP

Leave a Reply

Your email address will not be published. Required fields are marked *