Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I've been trying to find a jQuery plugin which creates behavior similar to that of Stack Exchange user searches. The user search used on Stack Exchange sites is not an auto complete, but is more akin to a result filter. Google calls their version of this pattern Google Instant Search, while some tech blogs refer to it as Google Live Search.

Is there a name for this instant filter search pattern?

share|improve this question
    
Is it 'Type ahead search'? –  greenforest Apr 26 '12 at 14:53
    
@user12999 Type ahead search in my mind is like auto complete but a bit more intuitive. Rather thank a pick list of suggestions it tries to guess what your next term is. So if I'm searching for apple sauce when I type apple, sauce would be suggested before finishing apple. –  ahsteele Apr 26 '12 at 17:48
    
Out of curiosity, is it the name of the feature or a plugin enabling the feature that you're interested in? –  AndroidHustle Apr 27 '12 at 8:00
    
@AndroidHustle name of the feature might lead to a plugin, but if a plugin exists it might lead to a name. Does that help? :-P –  ahsteele Apr 27 '12 at 15:59
    
What about Responsive Search? We have Responsive Design which dynamically modifies something based on the user's setup. Responsive Search seems like it'd fit in the same paradigm by dynamically modifying something based on the user's input. –  Karen Apr 27 '12 at 16:01

5 Answers 5

up vote 2 down vote accepted

"Filter as you type"

Personally, I would call that Filter as you type. It could also be called Search as you type. But as some sort of list of search results already is present before you start "searching", that list could be considered to be "filtered".

Terms like Autocomplete and Suggestions are too wide to avoid confusion when defining design patterns. It is also important to make the difference of what you are filtering or suggesting, is it the search text, or the result items? Some times they are the same, and sometimes not.

A. suggesting the search text

  • Suggestions drop down: A dropdown with suggested search text alternatives to what you wrote, more or less matching something you were about to type.

  • Text completion: The box being filled with marked text, allowing you to continue typing. Typically combined with suggestions. (The term "Text completion" is used in WPF and Silverlight.)

enter image description here

B. presenting search result items

  • Search as you type: Presenting results as you type, typically like Google Instant.

  • Filter as you type: A list of already presented results is filtered. This differs from "Search as you type" by that there already is a list of "result items" present before typing anything. The filterable list could consist of search results, but also something else, like contacts or users.

enter image description here

Please correct me if I'm wrong! I find that my peers often have a hard time picturing these different behaviours when I try to describe them, both verbally and in mock-drawings. So +1 for the question; because having a common vocabulary for things like these is worth a lot. :)

Oh, and I also posted a question on a similar topic once: How to combine Suggestions with Filtering in a searchbox?

share|improve this answer

Based on the source (from view-source), it really is an autocomplete-type of behavior (at least in its technical implementation).

The difference is that instead of giving you a drop-down display of eligible options, it displays them on the page. Since the page's entire purpose is to give you a result set of potential users, and if you select one, to take you to that user's profile, the way it presents the "autocomplete options" is far more usable than the extremely limited dropdown format that most auto completes have.

However, if there really is name for this, I'd also be curious...

UPDATE: I think it is "Live Search"

"Auto-suggest" and "Auto-complete" appear to be associated with assisting a user in completing a data input field with the correct data, reducing errors in data entry, etc.

"Live Search" appears to be associated with returning search results. It just so happens that in most cases, it is related to a faceted search (multiple search parameters), but in a few cases like Google Live Search, there's only one input field driving the search.

share|improve this answer
    
Incidentally, unless your full dataset is loaded into the dom, I doubt a jQuery plugin alone will suffice for this feature. For a large dataset, you will need some programming on the server side (or an existing search function/API). If I were tasked with building this, I'd start by taking the code from the user search on StackExchange sites, because it is largely about displaying the results and it would be difficult for any plugin to give you what you wanted out of the box that would fit your site. –  brightgarden Apr 27 '12 at 14:40

I'll make it short: IMO this pattern is called Auto Suggest.

share|improve this answer

I have just recently been made aware of the PicNet jQuery plugin. They provide a real time filtering of data, similar to that of SE and Google. (They actually stress that their plugin will give the search Google-like column filtering capabilities)

share|improve this answer

Doesn't really matter, this is still "classic" autocomplete behaviour with a spin on the results presentation. I quite like IMDb's straightforward terminology where it's just called "magic search"

The most difficult part would be a server responding to an ajax request quickly - otherwise it will end up not helping but infuriating the user instead.

There's a nice although shallow overview of how IMDb does their magic search, than it's just a matter of rendering html the way you want from the search results.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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