Basic “Google Suggest”-like script

Recently while working on the Google Project, I was messing around with AJAX and figuring out how JSON works etc, so I decided to implement the much talked-about “Google Suggest” thing myself just to test my JSON and AJAX techniques. Turns out it indeed is really simple in concept and implementation, except that the amount of “bells ‘n whistles” you can add is endless.

“Google Suggest” in 5 easy steps:
1. Capture the onkeydown events of the text-box where the person is typing
2. Send the text typed to a server-side script (in ASP, PHP, Perl or any language you prefer). This you could do by passing the server script URL with the typed text to inline frames or XMLHttpRequest suiting your taste and requirements.
3. The server side script will search the database table for entries whose text starts with the text presently in the front-end textbox.
4. This list can be converted to a JSON object, or an XML feed or plain inline-frame javascript etc and will be received back by the client
5. The client will display the received list in a floating DIV or container below the textbox and permit the user to select an entry from that list by either arrow keys or mouse clicks.

So in my script, I wrote this Google Suggest-like tool that would read names from a database and display them as we type.

This code is really elementary with loads of features missing, and lots of optimizations possible. I wrote this script in like 2 hours in the dead of night so wasn’t thinking about lots of goodies and optimizations.

Download the ZIP file: Auto-suggest names

Minimum Requirements: ASP 6.0+ support, Microsoft Access 2000, IE 5.5+, FF 1.5+.

I’ll list out some things that can be added to this code of mine:

1. Add mouse handlers to the drop-down menu to enable mouse clicks on suggestions
2. Improve the elementary keyboard support it gives to include responses to several other keys
3. Optimize the feedback process to the server by inserting a “delay” before sending the typed value to the server-side script. That is, instead of sending the text “immediately” on “every” key-press, wait after a keypress for a second or two and see if the person stops typing. If the person hasn’t entered anything for, say, two seconds then send the text over to the server for searching. This will reduce the load on the server as its obviously wiser to wait for the user to atleast tell the client what he/she has to say before jumping off to suggestions. This is done by Google too.

I’ll add some more suggestions as I think of some more.