Drop-down list with advanced search

by waxwing   Last Updated October 19, 2019 15:16 PM

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?

Answers 4

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.

Adnan Khan
Adnan Khan
February 21, 2013 22:12 PM

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.

Dominik Oslizlo
Dominik Oslizlo
February 21, 2013 22:30 PM

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).

February 22, 2013 09:40 AM

I have a similar need to yours. How did you finally design your solution? Unfortunately I cannot find much on this matter online.


October 19, 2019 15:15 PM

Related Questions

Updated March 10, 2016 07:06 AM

Updated November 26, 2016 07:17 AM

Updated February 10, 2018 12:16 PM

Updated July 22, 2016 08:06 AM

Updated June 21, 2018 09:16 AM