• 1
• 2
• 3
• 4
• 5

abstraction add ajax articles auto backend background browser called change check color command create database div documentgetelementbyid file form function functions google handlesearchsuggest id ip items javascript key line list mouse newline null object order page php px query querystring ready reply request response return script search searches searchreqreadystate searchsuggest send server side simple simply site split sql str string suggest suggested suggestid suggestions table text textbox time title titles tutorial type var xml xmlhttprequest

Keyword Cloud Navigation Map

Suggest is one of the better AJAX patterns that I have run across.  It certainly can make a site much more user friendly if 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.

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 separated list of suggested searches.

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

The database table structure for this tutorial has 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.

Read Full Tutorial...