7

I am creating a control to allow users to select an item from a list. The number of items can vary greatly - anywhere from a handful up to millions.

A drop-down with autocomplete functionality seemed to me like a sensible choice. If there are few items, a user can click the arrow and select the correct one; if there are many she can quickly find the correct one by typing the name of the item.

However, sometimes this is not enough. With several thousands of items, a user may require more advanced search criteria to find what she's looking for. Currently, this is implemented as a Search-button to the next of the field that opens a dialog with additional search criteria:

Mock-up of the current drop-down control

The user enters criteria and clicks the Search! button, whereupon the drop-down is filled with the search results.

Unfortunately, there are problems with this approach. Some I can think of are:

  • There is no visual indication that the drop-down and the filter dialog are linked
  • The search results are not immediately visible
  • The dropdown remains filtered after the dialog is closed, without any indication to the user

So, I'm looking for suggestions. Is there a common way to do this that I have missed? Do I need to rethink the advanced filters? Can this be remedied just by adding visual cues?

3 Answers 3

4

One more option to consider, if you can expand the dropdown a little bit treating it as a pane rather than dropdown sensu stricto: Dropdown filter pane

Remember that criteria in the top right only can present a short sumary of what is defined in filters, but this should be enough for user to be aware of it.

The idea is to show the filters alongside with the dropdown.

3

Consider this layout:

enter image description here

The search field is clearly visible, distinct, and the filtered results appear below, to be chosen by the user. For multi select, you can use the tag approach:

enter image description here

Both examples are part of an open source Javascript plugin, Chosen.

2
  • 1
    Thanks! I love the feel of Chosen, and I although I don't really see how it solves my larger problem. Do you mean that I should do away with the "advanced filters"? Or do you mean that if I place the search button inside the dropdown foldout, the dialog and the foldout will be open at the same time, making the search results immediately visible?
    – waxwing
    Feb 22, 2013 at 8:45
  • It seems like you're answering the wrong question. The question was about "advanced filtering panel and behaviour". Feb 22, 2013 at 9:33
1

Here is an example of a dropdown with filtering and advanced filtering options:

enter image description here

The filter icon on the right will toggle advanced filtering (by file type in this case). You may change the colour of the filter icon (button) to differentiate the state of advanced filtering (gray for off and blue for on).

2
  • What IDE is that screenshot from? Eclipse? Feb 22, 2013 at 16:32
  • 1
    @Charles IntelliJ IDEA Feb 22, 2013 at 21:27

Your Answer

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

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