2011-01-18 11 views
2

Gmailの受信者アドレスを入力する際のドロップダウンやスタックオーバーフローのプルダウンと同様の機能がWebアプリケーションに必要です質問作成用のタグを入力するとき。複数の値を含むテキストフィールド、ドロップダウンの候補(Gmailの[宛先]フィールドなど)

Gmailには、「To:」アドレス用のテキストフィールドがあります。入力を開始すると、候補が表示されたドロップダウンが表示されます。セミコロンまたはカンマを入力すると、別のアドレスを入力できます。繰り返しますが、このアドレスの入力を開始すると、ドロップダウンに候補が表示されます。

提案は、入力したテキストを含むアドレス帳のサブセットです。たとえば「jo」と入力した場合、「Jo hn」と「Foo jo e」が表示されますが、「XYZ」は表示されません)。一致する部分は太字で強調表示されています。

「Enter」を押すか、上下のカーソルキーを使用すると、ドロップダウン候補リストをナビゲートできます。

私はおそらくこれを自分自身でプログラムすることができましたが、そこに標準的なソリューションがなければならないと感じています。しかし、私が見つけたのは、現場の価値が示唆につながった解決策であり、現在のの部分の値ではなく、フィールドのが提案に導かれました(それぞれの部分は区切り記号で区切られています) Gmailの場合は「;」、スタックオーバーフロータグの場合はスペース)。

私はWicket(Javaサーバー側のWebフレームワーク)を使用していますので、Wicket固有のソリューションはすばらしいですが、それ以外の場合は、プレーンなJavascriptライブラリをプロジェクトに組み込むことができます。

答えて

3

jQueryUIのオートコンプリートは素晴らしいプラグインです。

http://jqueryui.com/demos/autocomplete/#multiple

リンクはほとんどあなたが説明したものを単語のための単語である「複数値」の例にあります。それは真ん中から部分的な単語に一致し、それはキーベースのナビゲーション、複数のエントリを可能にします。

+0

wiqueryライブラリで、このための改札ラッパーがあります:http://code.google.com/p/wiquery/wiki/Autocompleteは – ireddick

1

Wicketstuffプロジェクトでオートコンプリートコンポーネントがあります。それを使用する方法についてはan Blogがあります。

関連する問題