web-dev-qa-db-ja.com

DropDownListとオートコンプリートテキストボックスのクロス

リストに項目を追加できるWebインターフェイスを考え出そうとしています。簡単にするために、選択するとクラブ/グループに割り当てられる名前のリストの例を使用します。

私は元々、すべての名前を含むドロップダウンリストを考えていました。しかし、あなたがそれらをたくさん持っているなら、リストを最後まで行くのは苦痛になるかもしれません。そこで、入力時に自動予測するオートコンプリートテキストボックスを考えました。これに関する問題は、リストを介した投機的なブラウジングと、データベースにない名前を入力する機能です。

私は2つのことを考えました。それは良い考えですか、両方のUI要素を交差させるテクニックを考えられますか?おそらく、使用されている類似のものの推奨の例ですか?

7
Damien

Chosen javascriptプラグインは、まさにあなたが求めているものかもしれません。それは多目的なコンボボックスソリューションです。エレガントも。これがスクリーンショットの例です。

Chosen screenshot

5
Taj Moore

すべての名前のリストと、その上にオンザフライの検索ボックスが必要で、以下のリストをフィルタリングする必要があるようです。

  • 検索ボックスに何も入力しないと、下にすべての名前が表示されます
  • ユーザーが入力を開始すると、リストがフィルタリングされ、名前は次第に少なくなります
  • リストが十分にフィルター処理されたら、フィルター処理されたリスト内のすべての名前(または選択のみ)をユーザーが目的のグループに移動できるようにします。

グループへの割り当ては、ドラッグアンドドロップを含む複数の方法で実装できます。また、特定の名前を検索し、Returnキーを押してそれを転送し、次に移動するだけのユーザーのために、キーボードショートカットを使用します。

5
Dan Barak

あなたが説明しているui要素のタイプは「コンボボックス」と呼ばれ、この機能を提供するいくつかのJavaScriptウィジェットがあり、特にこれはa-la jQueryです: http://code.google.com/p/ sexy-combo /

3
Hellovetica

それは私たちが話している情報に依存します。

ユーザーが提供する特定の「値」をユーザーが入力する必要があることがすでに設定されている場合、オートコンプリートは適切だとは思いません。ユーザーが情報を書き込もうとすると、それがフラストレーションにつながると私は思います。

ソリューション1サブグループを整理できる場合、ソリューションは1ではなく2つのDropDownListを使用できます。

例:最初のドロップダウンはアクティブで、2番目は無効です。最初のリストは、デザインとグラフィック、プログラミング、会計、ツーリズムなどのような仕事グループに関連する作品を示しています...

最初のドロップダウンを選択すると、2番目のドロップダウンがアクティブになり、Webデザイン、グラフィックデザイン、ビデオメーカーなどのサブグループが表示されます。

これにより、2つの選択ボックスだけで情報のスクロールを絞り込む必要があります。

ソリューション2 JavaScriptの使用に問題がない場合、リンクのクリックのアクティブ化時にcssポップアップを作成し、すべての情報が単一の行リストではなく複数に表示されるようにします行(多分アルファベット順またはサブグループ)。

0
Littlemad

"intellisense" として知られているように聞こえます。

0
justin.m.chase