3

I got a textfield/combobox for typing a search string (or selecting a recent searchstring). The search results are presented in a list below the box.

I also got a textfield for filtering the list.

The following familiar designs illustrate the problem. The upper example is from Outlook where the list is sorted as you type. The bottom example is from Chrome where suggestions are given in a dropdown box.

autocomplete vs filter

How to combine the two? The suggestion area (Chrome) would overlap the list (Outlook).

Does anyone have an example of an application that combines filtering and suggestions in one box, similar to this? Maybe I am way out, because I cannot find any.

Improve this question
5
  • I'm confused as to what the problem is? Are you not content with the examples you provided? Looking for another way to accomplish the same task?
    – Aaron McIver
    Nov 29, 2011 at 14:56
  • The problem is that the suggestion area would overlap the list, so that the filtered items cannot be seen in full. In our application we have two boxes, one for searching, and one for filtering the search results. I would like to find a way to combine them.
    – JOG
    Nov 29, 2011 at 14:58
  • 3
    The Chrome example you provided appears to meet your needs though. It is both filtering and providing a suggestion via the main URL bar. Are you wanting more then one auto complete suggestion? Why does the Chrome example not work?
    – Aaron McIver
    Nov 29, 2011 at 15:08
  • It is the list below the box (the mail list) that is filtered, and also covered by the suggestion dropdown (the search string suggestions).
    – JOG
    Nov 29, 2011 at 15:16
  • @aaron-mciver The Chrome example presents one instance of each suggestion, while the (hypothetical) results list which is being actively filtered could show multiple hits for the same terms.
    – Erics
    Dec 27, 2011 at 23:22

4 Answers 4

Reset to default
2

It is possible to combine the two, but you'd need to carefully design the location and size of elements. Google Instant for example provides both suggestions and live filtering, combining the two by judicious spacing, positioning, and sizing. They manage it by having only 4 suggestions on the drop down, and having some non-essential guff take up that minor amount of space between the search box and the first search result.

google instant in action

Improve this answer
2
  • I think I will have a hard time getting away with the guff. :)
    – JOG
    Mar 21, 2012 at 8:30
  • This is marked as solution as this does not require another action. I don't want to force my users into being aware of exactly what kind of feature they are using.
    – JOG
    Apr 27, 2012 at 8:26
5

There is not a standard pattern for a mixture of "live" search and a "live" suggestions/filtered search because they are very similar concepts that probably don't merit being presented in the UI simultaneously.

Perhaps you would better serve your users by following a more conventional "suggestions first" search pattern. Below are some implementations in JIRA and OSX Spotlight that are worth studying:

enter image description here

  • You start by delivering a targeted, concise result set.
  • The length of the results is intentionally kept short (and categorized in these cases) to aid quick scanning.
  • A secondary link in the results points to a more comprehensive, lengthy "full" search of the same search term.

This pattern favors the live suggestions and puts trust in the search engine, betting that most people, most of the time, will find what they want at the top of the pile.

Improve this answer
1

One solution (if I understand the question) would be to require another action, such as clicking a go button or pressing return/enter before the filtered view get's updated. So, only worry about one step at a time. Populate the auto-suggest dropdown during typing, and then after the confirmation event, hide the suggestion box and filter the data view based on the new value.

Improve this answer
2
  • I guess requiring another action could be the right approach! :) But it's still problematic: I still want to keep the instant filtering while typing, so using a key press, like tab, would only have the direct effect of hiding the suggestions. (I got enter kept for selecting the best suggestion ("stackoverflow.com" in the example)).
    – JOG
    Dec 7, 2011 at 0:06
  • Does anyone have an example of an application that does something similar to this? Maybe I am way out, because I cannot find any.
    – JOG
    Dec 9, 2011 at 12:30
0

I always think it terms of the data range. If this is for a site with a fixed data set (think Amazon, who knows every product they sell), then they can "steer" you in the correct direction by auto-correcting, and preventing you from searching for something they don't have.

A good supplement to this is a suggestion, which is positioning what you think is close to the typed in term.

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.