Lead: Shani Laendler (Unlicensed)

Description

Live search (aka "active search", “incremental search” or “search-as-you-type”) is a search type in which each character that the user enters or deletes runs the search query. This type is usually suitable for small-medium databases

Usage and Behaviour

General Guidelines

Internal Logic

Results Presentation

• The searched string will be highlighted within the text.

• The results are displayed in the list area according to the existing sort method.

• In case the list area is arranged in an hierarchical tree view the search results may be presented in either the same hierarchical view or as a simple list. See 'Best Practices' section for guidelines on selecting the appropriate approach. Example for hierarchical view in the search results:

In case the results are presented in tree view, all roots will be auto-expanded to present the searched item. 

• In larger or more complex result sets, consider presenting the number of results in a prominent area. Try adding that in any case when possible:

Results Loading Time

The system should mitigate long loading times.

• Less than 0.1 second: no loader is needed.

• 0.1-5 second: loading spinner with the text "Searching <Categories>..."

• More than 5 seconds: this loading time is too long for “Live Search”. Use Search with Auto-Suggest instead.

Interaction

Step	Visual Example	Description
Initial state		Hint text in grey
Hover over the search field		Boarder colour changes
Click on the text field		Search in focus Hint text presented Text mark is flickering Suggestions: recent and/or popular queries are presented (optional)
Enter first letter		Hint text hidden Suggestions are hidden The list is filtered Searched query is highlighted within the list Clear all ("x") is presented
Enter next letter/s		The list is filtered to show relevant results
Click on item in the list		Focus is moved away from the search field
Clear all		Click on the “x”: (1) clears all characters (2) focus on the text field. The "x" disappears when the text is cleared (both manually or using the "x" button)

Validations and errors

There are no validations on syntax.

No results found

• The results area will clearly state no results were found

• The text will say "no <items> were found" (e.g. no categories were found, no employees were found).

Best Practice

• Use when:

  • The database is small-medium and the results can be filtered immediately (no need to retrieve the data from the back-end)

  • The results area is located below and near the search field

• Don’t use when:

  • When the query is applied on a complex or big database that will cause a long loading time. In such case use Search with Auto-Suggest.

• Automatic focus: use auto-focus on the search field to aid the user in conducting a fast search (and reduce clicks). Make sure to use it under these conditions:

  • The list is the only/main component presented in the area or section (e.g. in a filter panel or in a modal window)

  • The list is presented upon request (e.g. click to open filter panel, click to open modal window)

• Display results in an hierarchical tree view vs. simple list: the results may be presented in both list types. Select the most appropriate type:

  • Is the search expected to produce a single or multiple results? (if single than list is probably good enough)

  • If the search is expected to produce a single result - a flat list may be sufficient

  • If the search is expected to produce multiple results - tend to select the tree view

  • If several results may have a similar name and the root may help in differentiating between results - select a tree view

  • If the root may be searched by itself - select the tree view

Future Version (TBD)

• Search on a simple list with multi-select

• Search on a tree view with multi-select