how to: add keyboard scroll / enter to autosuggest script?

Question

I created an autosuggest script using php, ajax and some css but I can't figure out how to make it so when the script suggests results to allow the user to scroll down the list of results using keyboard arrows and then press enter to select desired result.

The script currently displays in a list format and and onclick the results the info is then filled into the search box.

What technique are people using to allow the user to scroll down with the keyboard and push enter to select a result choice?

Thanks

Answer 1

I have been using jquery and one of its myriad of auto-complete plugins for this for a while... it's pretty much a no brainer to integrate it.. and you get a bunch of fairly complex niceties for free.

Here's a demo of one I've used a bunch: http://view.jquery.com/trunk/plugins/autocomplete/demo/

EDIT:

ultimately if you want to roll your own, you'll need to listen for keyboard events and keep track of your position in the list... then on enter key, push the current selected value into the text field. here is a good overview of keyboard event stuff:

http://unixpapa.com/js/key.html

http://www.javascriptkit.com/javatutors/javascriptkey.shtml

I would recommend using some library to abstract away all the browser nuttiness.. jquery is an awesome library with thousands of hours of testing and robust cross browser support. It normalizes the browser event model for you and really makes your code easier to read and maintain.