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:
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:
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?
Consider this layout:
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:
One more option to consider, if you can expand the dropdown a little bit treating it as a pane rather than dropdown sensu stricto:
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.
Here is an example of a dropdown with filtering and advanced filtering options:
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).
I have a similar need to yours. How did you finally design your solution? Unfortunately I cannot find much on this matter online.