web-dev-qa-db-ja.com

可能な結果が不明な場合のドロップダウンリストの代替

かなり長い間、私はデータの割り当てでドロップダウンリストに代わるものをWebで探していました(つまり、一部のデータを検索するときではなく、保存されるデータキャプチャ中)。

一般に推奨される1つの代替方法は、「オートコンプリートテキストボックス」ですが、少なくとも一部のデータがわかっている場合のみです。

しかし、特定の国の都市の選択を想像してみてください。ユーザーは何を探しているのかわからない可能性があるため、郵便番号またはその名前で識別されるすべての都市をリストします。そのシナリオでは、完全な検索機能を備えたポップアップが使用される可能性がありますが、プロセスが再び遅くなります。

他にあなたの心は何ですか?一般的に何を使用していますか?このための素晴らしい解決策を見つけた主要な側面を知っていますか?


[更新]

質問を正しく説明できていないことがわかったので(申し訳ありません)、デモの目的でスクリーンショットを使用して明確化しようとします。

Screenshot

新しい顧客を追加するためのフォームを想定してください。このフォームには、顧客名とその主な担当者がその新しい顧客に記録されます。従業員(数千人の従業員を抱える大企業を想定)は、次の4つの属性によって識別されます。

  • 性別
  • ファーストネーム
  • 苗字
  • ブランチ

上のスクリーンショットでは、それらをドロップダウンリストに表示しましたが、このリストがもう使用できないことは明らかだと思います。従業員は4つの属性が異なるため、自動提案も実際には使用できないと思います。それで、その目的のために他に何を一般的に使用していますか?

質問が明確になったことを願っています。

8
bonifaz

MS Outlookの「TO:」ダイアログのように、4つのパラメータが列であるソート可能なテーブルを持つダイアログはどうですか?

enter image description here

6

多分良い妥協案は、JQuery-Chosen( http://harvesthq.github.com/chosen/ )のようなものかもしれません。通常の選択ボックスの視覚的な側面を維持するフィルターを追加するだけです。

3
F.Filippi

アプリで同様の機能を実行する方法は、テキストフィールドを入力として使用し、<ul>の下に、ユーザーが入力した内容に基づく提案が含まれます。検索エンジンの自動提案機能に似ています。

1
Mike

4つのフィールドすべてでオートコンプリートされる単純なテキストボックスで問題が発生するかどうかわかりませんか?自動提案は、4つの属性すべてに同時にシームレスに適用する必要があります。

このようなテキストボックスは、顧客アカウントを選択する必要がある場合に使用します。そのようなアカウントには、ID、フルネーム、国、オフィスの場所があり、約15000のアカウントがあり、単純なドロップダウンには多すぎて、誰かにIDを知らせる必要はありません。入力すると、キーボードを離れることなく、フィルタリングされた結果がすばやく一致して表示され、複数行の結果アイテムを含む適切にフォーマットされたHTMLドロップダウンが表示されます(2行目に国とオフィスを表示するなど)...

...シンプルなGoogleインスタントのようなものです。なぜなら、ブランチで検索したいのに、人の名前がわからなかった場合は、少なくともブランチの名前を知っていて、それを入力し始めなければならないのですか。

また、クエリはサーバーに対して非同期で行われ、最初の数文字が入力された後にのみ一致を返すため、ブラウザに15000アカウントをロードする必要はありません。

誰かが行方不明になったとき、または何を入力し始めるのかわからないときに、オプションとして高度なポップアップ検索ボックスを使用し、通常のケースの効率のためにシームレスな入力を残すことができます。

1
Oskar Duveborn

ドロップダウンボックスはそのままにして、「フィルター」テキストフィールドを追加して結果を絞り込む方法はどうでしょうか。開始点だけでなく、リストアイテムの任意の場所にあるフィルターテキストに基づいて結果をフィルター処理すると、機能する可能性があります。

したがって、ドロップダウンボックスの場合、ユーザーは少なくともフィルターボックスに「シカゴ」と入力して、リストをその都市の人々(またはシカゴと呼ばれる人々だと思います!)に絞り込みます。または、特定の人物を探しているが、姓が「息子」で終わっていることを覚えている場合は、「息子」と入力して、ジャクソン、ジョンソンなどのすべてを表示することができます。

正直なところ、膨大なデータセットから選択する必要があり、ユーザーが何を探しているのかわからない場合、エレガントに表示する方法は多くありません。

0
Cam Jackson