The code consists of three parts:
In essence, we have one or more text inputs to which we add custom event handlers: keypress, keydown, focus and blur. Both keypress and keydown events need to be captured, so that display keystrokes and control keystrokes can all be interpreted properly. Two control keystrokes in particular to capture are up-arrow and down-arrow, so that we can use them to navigate the list of auto-suggest items instead of clicking on them with the mouse. It's a bit tricky getting the list-item click event to happen before the entire list was hidden; to accomplish this I've added a timer to the input's blur event, so that the list item's click event can still happen; look for setTimeout in the code.
With this in mind, here is my solution which you are welcome to download (click on the code box to the right) and play with*.
You can also test it live, using the text boxes below.
Start typing a name (eg, John) into either of the text inputs below:
* Disclaimer You can take this code and modify it any way you like. However, by doing so you agree that you use it at your own risk; I shall not be held responsible for its use.