Cloning Google Suggest With Ajaxac

Implementing The Application Javascript

Now we need to piece the whole thing together and make it work. Some of the JavaScript created here will be created dynamically using AjaxAC, while some of it will be utility functions that we will place in googlesuggestclone.js.

First things first though, we need to work out exactly how this will all work before it can be implemented.

It will need to work something along the lines of:

1. Do nothing until user enters some text in the query input box.
2. User enters some text
3. Start a timer counting down from N milliseconds
4. If user presses another key before time expires, start the timer again
5. If timer expires:
   1. Sanitize string (only letters, numbers and spaces, periods or underscores are valid)
   2. If the remaining string has more than 0 characters, send a request using the getsuggestions action
6. Receive results and populate the search-results div with them

Now, in addition to monitoring the input box for input, we need to monitor the search-results div for any keypresses. Keypresses allow the user to select a different suggested option. Additionally, the user can use the mouse to select the alternate options.

This is the application at its most basic level. There are more advanced things that can be implemented, such as caching of suggestion results, but perhaps this will be left for another day.

• Next: Creating The Javascript Utilities