3 Answers
3

Add attributes to each option, as @JMC suggests. However, I'd prepend the attribute name with "data-" to be in line with HTML5 standards. jQuery (as of v1.4.3) also supports retrieving attributes beginning with "data-" using .data().

Bind to the keypress event. This is more correct than keyup for the following reasons:

Semantically, keypress means user input has happened, while keyup means the physical key is lifted. For example, holding down a key will generated multiple keypress events (for each character that appears on screen), while only one keyup event. Keypress is also not prone to incorrectly receiving the order of keypresses when the user types "QW" quickly, but lifts the "W" key (a keyup) before the "Q" key.

Keyup will be generated on non-character keys such as the arrows, backspace, etc..., while keypress will not.

Use a timer to distinguish between two isolated key presses and a single sequence of key presses, e.g. did the user mean "W" for William Shakespeare and then "P" for Phillip Larkin, or just "WP" for ... Whatever Poet.

If you can't do this on the server-end, jQuery could easily insert an extra attribute to an option based on it's value. Assuming, of course, that you know in advance each of the values you'll have in there.

After getting the extra attribute into the option, it would just be a matter of checking those values on keyup of the search box.

Now, for the selection behavior, you probably need to intercept the key pressed events and do your own logic. The trickiest part is probably figuring out what to do for odd cases, like what happens when someone type "JKM" -- Keats or Milton?