Cloning Google Suggest With Ajaxac
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:
- Do nothing until user enters some text in the query input box.
- User enters some text
- Start a timer counting down from N milliseconds
- If user presses another key before time expires, start the timer again
- If timer expires:
- Sanitize string (only letters, numbers and spaces, periods or underscores are valid)
- If the remaining string has more than 0 characters, send a request using the getsuggestions action
- 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.