web-dev-qa-db-ja.com

技術的に1つに制限されている場合、複数のフィルターオプションを提供するにはどうすればよいですか?

シナリオ

フィルター1とフィルター2の2つのフィルターがあります。フィルター1では、ユーザーは複数のタブを選択するか、テキストボックスに何かを入力してSearch Tagボタンをクリックできます。これを行うと、ajax呼び出しが行われ、左のボックスに画像が読み込まれます。

フィルター2では、ユーザーはドロップダウンから何かを選択してデータをロードするか、テキストボックスに何かを入力してボタンSearch cityを押すことができます。

enter image description here

問題

Ajaxを介して呼び出すサービスとして複数のフィルターを選択することはできません。複数の基準を受け入れません。基本的に私はフィルターを配置するアイデアが必要であり、また選択されたものを画面に表示する必要があります。

技術的に1つに制限されている場合、どのようにして複数のフィルターオプションを最適に提供できますか?

7
Happy

フィルターにタブ付きコンテナーを使用する

フィルターオプションを分離する一般的で許容できる方法は、ユーザータブ(またはタブのバージョン)です。これは、ユーザーがいくつかの異なるサービスを検索できる旅行Webサイトでよく見られます。

この方法では、一度に1セットの検索条件のみを送信できます。

enter image description here

フィルターの各セットを適切な名前のタブに入れます。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

8
dennislees

検討できる設計オプションの1つは、検索ボタンに行動を促すフレーズのプルダウンを使用することです。したがって、デフォルトでは、1つのタイプの検索の入力要素を提示でき、ユーザーが他の検索タイプを選択すると、代替の入力要素のセットを提示します。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

1
Michael Lai

これが私の見解によるあなたの解決策です。

下の画像を参照してください。 enter image description here

1
Jasmin Javia