12

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?

5
  • Is it 'Type ahead search'? Apr 26, 2012 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, 2012 at 17:48
  • Out of curiosity, is it the name of the feature or a plugin enabling the feature that you're interested in? Apr 27, 2012 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, 2012 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, 2012 at 16:01

6 Answers 6

6

"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?

4

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.

1
  • 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. Apr 27, 2012 at 14:40
2

Wikipedia defines incremental search as:

In computing, incremental search, incremental find or real-time suggestions is a user interface interaction method to progressively search for and filter through text. As the user types text, one or more possible matches for the text are found and immediately presented to the user. This immediate feedback often allows the user to stop short of typing the entire word or phrase they were looking for. The user may also choose a closely related option from the presented list.

1
  • 2
    Could you copy and paste the relevant parts of the article into your post?
    – Mayo
    Feb 5, 2018 at 13:35
1

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

0

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)

0

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.

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.