When i am working on one of my project, i need to work on AJAX. So i started googling about AJAX how to's. So i started learning AJAX slowly and steadily. After completion of learning AJAX i started working on AJAX Auto complete suggest feature. So i tried hard to work on that finally i got the solution from one of the online resource. I hope you are also one of the guy who is looking for such kind of solution. So i thought i should share this to my online users. One thing every one should get this in their mind that what actually an AJAX Auto complete is? Perhaps i too didn't have any idea but after working on that i came to know.
So let's see what an AJAX Auto complete suggest is? As a web developer almost all us in our daily life, use Google at its best. When we start googling like "how to" or "AJAX tutorial" etc then the Google will show some results beneath its search text box. See below picture for better understanding. So this feature is called as AJAX Auto complete Suggest Feature. Now a days all of the websites have this feature.
Now Let's see how to design such an application.
Step 1: Design the Database.
See the below picture for better understanding of database design. In this tutorial, i have just created one table for demonstration purpose. The process is same for the bigger database also. In this tutorial i assumed the database name as "phphunger_ajax_autocomplete" and table name as "games". Change the names as your wish.
Create the table as "games"
CREATE TABLE IF NOT EXISTS `games` ( `id` int(10) NOT NULL AUTO_INCREMENT, `name` varchar(200) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1;
Dump some data into the table "games"
INSERT INTO `games` (`id`, `name`) VALUES (1, 'Angry Birds'), (2, 'Angry Birds Space'), (3, 'Angry Birds Space Battle'), (4, 'Babe Rescue'), (5, 'Ball Defence'), (6, 'Ball Defence 2');
Once the database design phase is over the next step is to design the front end for the user from where he starts searching the content.
Step 2: Design the HTML Form
Here add one Textbox on the HTML Form which communicates with AJAX and fetches data from the back-end to the front-end. See below picture how the form looks like. Name the file as "index.html"
Step 3: Write AJAX Code
Step 4: Connect to Database and Fetch Results.
This is the file for database connection and fetching results from table. Name it as searchSuggest.php That's what an AJAX Autocomplete feature. Use this code snippet if your requirement matches. Do play with this code. Happy coding.
Did You Enjoy this Article ?
If yes, Then enter your email below to get
more such great articles in your inbox
For FREE !