web-dev-qa-db-ja.com

詳細検索付きのドロップダウンリスト

ユーザーがリストから項目を選択できるようにするコントロールを作成しています。アイテムの数は大きく異なります-一握りから何百万まで。

オートコンプリート付きのドロップダウン機能は、賢明な選択のように思えました。アイテムが少ない場合、ユーザーは矢印をクリックして正しいものを選択できます。多くある場合、アイテムの名前を入力することで、正しいものをすばやく見つけることができます。

ただし、これだけでは不十分な場合もあります。数千のアイテムがある場合、ユーザーは探しているものを見つけるために、より高度な検索基準が必要になることがあります。現在、これは、追加の検索基準でダイアログを開くフィールドの次への検索ボタンとして実装されています。

Mock-up of the current drop-down control

ユーザーが条件を入力してSearch!ボタンをクリックすると、ドロップダウンに検索結果が表示されます。

残念ながら、このアプローチには問題があります。私が考えることができるいくつかは:

  • ドロップダウンとフィルターダイアログがリンクされていることを視覚的に示すものはありません。
  • 検索結果はすぐには表示されません
  • ダイアログが閉じられた後も、ドロップダウンはフィルターされたままで、ユーザーには何も表示されません。

だから、私は提案を探しています。私がこれを逃した一般的な方法はありますか?高度なフィルターを再考する必要がありますか?これは視覚的な手がかりを追加するだけで改善できますか?

7
waxwing

ドロップダウンを少し拡張して、ドロップダウンsensu strictoではなくペインとして扱うことができる場合は、もう1つ検討する必要があります。 Dropdown filter pane

右上の基準はフィルターで定義されたものの短い要約しか提示できないことを覚えておいてください。しかし、これはユーザーがそれを認識するのに十分でなければなりません。

アイデアは、ドロップダウンと一緒にフィルターを表示することです。

4
Dominik Oslizlo

次のレイアウトを検討してください。

enter image description here

検索フィールドは明確に表示され、明確に区別され、フィルタリングされた結果はユーザーが選択するために下に表示されます。複数選択の場合、タグアプローチを使用できます。

enter image description here

どちらの例も、オープンソースのJavascriptプラグイン Chosen の一部です。

3
Adnan Khan

以下は、フィルタリングオプションと高度なフィルタリングオプションを含むドロップダウンの例です。

enter image description here

右側のフィルターアイコンは、高度なフィルタリングを切り替えます(この場合はファイルタイプ別)。フィルターアイコン(ボタン)の色を変更して、高度なフィルター処理の状態を区別できます(オフの場合は灰色、オンの場合は青)。

1
alexeypegov