javascript - Text field containing multiple values, suggestions in a drop-down (like Gmail "To:" field) - Stac

admin管理员组

文章数量:1335371

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 position.

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 ma, 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.

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 position.

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 ma, 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.

• javascript
• html
• autoplete
• wicket

Share Improve this question Follow edited Jan 18, 2011 at 14:56 Adrian Smith asked Jan 18, 2011 at 14:50 Adrian SmithAdrian Smith 17.6k1212 gold badges7575 silver badges9595 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

jQueryUI's autoplete is a great plugin.

http://jqueryui./demos/autoplete/#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.

You can use the AutoCompleteTextField class in wicket-extensions for this.

Wicket Examples provides a sample implementation as the first item in its AJAX section. The source code link is kind of hard to see, it's at the right edge of the gray bar.

(The description even says "like google suggest!")

There are some JQuery plugins for that out there, for example:

FCBKplete

Tokenizing Autoplete Text Entry

There is a AutoComplete Component in the Wicketstuff project. There is an Blog on how to use it.

本文标签：