7

The Scenario

I have 2 filters - Filter 1 and Filter 2. In Filter 1 users can either select multiple tabs or enter something in textbox and click Search Tag button. Doing this will do ajax call and load image in left box.

In Filter 2, users can select something from dropdown and load data or enter something in textbox and hit button Search city.

enter image description here

The Problem

I cannot have multiple filters selected as service which i call through ajax will not accept multiple criteria. Basically i need idea to arrange filters and need to also show on screen what has been selected.

How can I best offer multiple filter options when I am technically constrained to one?

Improve this question
1
  • 2
    This answer had received votes to close because it had been phrased and tagged as being about implementation. This isn't a problem about html and javascript. I believe it is a legitimate question for this site when phrased as it is now.
    – dennislees
    May 2, 2016 at 14:45

3 Answers 3

Reset to default
8

Use a tabbed container for the filters

A common and acceptable way to separate filter options, is to user tabs (or versions of tabs) This can often be seen on travel websites, where users can search for several different services.

With this method, it's only possible to submit one set of search criteria at one time.

enter image description here

Put each set of filters in an appropriately named tab.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
6
  • Ok tab looks ok. But you see there is option to select multiple tags or enter search in textbox. How would user understand this flow in filter1?
    – Happy
    May 2, 2016 at 15:35
  • This part of the UI is unclear from your mockup and description. It would be helpful if you could take a little time and create mockup that is more realistic. Are these tags fixed (always the same)? Are there only 4? or more? Right now your explanation is too minimal and your mockup to general to be able to solve this problem.
    – dennislees
    May 2, 2016 at 16:30
  • My tags are fixed. Only 4. I can select either multiple tags or enter text and search.
    – Happy
    May 2, 2016 at 16:32
  • One idea is to have 4 option buttons. 2 in filter1 and 2 in filter2. Option button will be placed beside multiple tags and one beside search tag button. Clicking any of option button will unlock it and then user can either select multtags or search using box. But that doesnt look good. Hope u got my problem now
    – Happy
    May 2, 2016 at 16:36
  • Use a line of copy to explain: "Select (multiple) tags, or type and search". Using JS, if any of the tags are selected, the search input gets cleared. If the user clicks to focus the search input field, the tags gets unselected. This way it's not possible to submit a search with both tag and typed input.
    – dennislees
    May 2, 2016 at 16:40
1

One design options you can look into is using a dropdown call-to-action for your search button. So by default you can present the input elements for one type of search, and when the user selects the other search type you present them with the alternate set of input elements.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
1

Here is your solution as per my point of view.

See the image below.enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.