HOME  |  AJAX  |  SOLUTIONS  |  TECHNOLOGIES  |  E-COMMERCE  |  ABOUT US
AJAX Suggest Tutorial

This tutorial will walk you through creating a search suggest similar in fashion to that of Google Suggest using AJAX technologies. 

You can see what the results of this tutorial will look like by typing in the search box above.

Suggest is one of the better AJAX patterns that I have run across.  It certainly can make a site much more user friendly in implemented properly.  What we will be creating probably won't be that useful, but it will give you a good understanding of how to implement a robust version on your own site.

This tutorial is extreamly simple, thus is a great place to start if you are unfamiliar with AJAX technologies.  The tutorial consists of a HTML page for presenting the suggest searchbox, a JavaScript file for handling the AJAX functionality, and a simple server-side PHP page that returns a new-line seperated list of suggested searches.

The suggestions returned from the server are based on my page titles.  In a real implemetation, you would probably want to make this more robust to suggest searches that other users have looked for in the past.

The database structure for this tutorial is going to consist of two simple columns: suggest_id and title.  All we really need is the title, but I always provide a primary key for any table that I create.
CREATE TABLE `suggest` (
`suggest_id` INT(11) NOT NULL AUTO_INCREMENT,
`title` VARCHAR(255) DEFAULT NULL,
PRIMARY KEY (`suggest_id`)
)
We can add as many different values as we like in the title field.  The table I'm going to query against holds all the page information for my site, but all that I'm pulling from is the title.  The "suggest.sql" script included with the source code download also inserts about 100 different values into the table so you don't have to manually enter anything.