I need functionality in my web application similar to Gmail’s drop-down of suggestions when entering recipient addresses, or Stack Overflow’s drop-down when entering tags for in question composition.
In Gmail, there is a text field for the “To:” address. Once you start typing, a drop-down appears with suggestions. If you enter a semi-colon or comma, you can enter another address. Again, once you start typing this address, a drop-down appears with suggestions.
The suggestions are the subset of your address book containing the text you’ve entered. (E.g. if you typed “jo” then “John” and “Foojoe” would appear as suggestions, but “XYZ” would not.) The matched part of the word is highlighted in bold.
If you press “enter” or use the up and down cursor keys, you can navigate around the drop-down suggestion list.
I could presumably program this myself, however I have the feeling there must be standard solutions out there I could incorporate. However, all I found were solutions where the value of the field led to the suggestions, and not the value of the current part of the field led to the suggestions (where each part was separated by a separator, for example “,” or “;” in the case of Gmail, or space in the case of Stack Overflow tags).
I am using Wicket (Java server-side Web framework) so any Wicket-specific solution would be great, but otherwise I’m sure I can incorporate any plain Javascript library in the project.
jQueryUI’s autocomplete is a great plugin.
http://jqueryui.com/demos/autocomplete/#multiple
The link is to the “multiple values” example which is almost word for word what you described; it matches partial words from the middle, it allows key-based navigation, multiple entries.