Description

Live search is a type of Search where each character that the user enters or deletes runs the search query. This type of search is usually suitable for small-medium databases.

Live search is also known as Active search, Incremental search or Search-as-you-type.

Usage and Behavior

General Guidelines

Internal Logic

Results Presentation

• The searched string will be highlighted in bold within the list of results.

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

• Where the items list is arranged in a hierarchical tree:

  • the search results will also be presented in the same hierarchical view.

  • the user will be able to search on all hierarchies, unless otherwise specified.

• If the results are presented in a hierarchical view, all sections will be auto-expanded to show the searched items.

Example of a hierarchical view in the results list:

Open

Open

• Where needed (and possible), consider presenting the number of results in a prominent area, particularly for larger or more complex results lists.

Results Loading Time

The system should mitigate long loading times.

• Less than 0.1 seconds: no loader is needed.

• 0.1 - 5 seconds: use a circular Progress Indicator with the text Searching <Categories>...

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

• (Optional) Delay trigger of initial search until at least 3 characters have been entered to improve performance.

Interaction

Validations and errors

There are no validations on the search string.

No results found

• The results area will clearly state that no results were found.

• The text will say No <items> were found. For example No categories were found or No employees were found.

Best Practice

Use when:

• the database is small-medium size.

• the results can be filtered immediately, with no need to retrieve the data from the backend.

• the results list is located below and near the search field.

Don’t use when the query is applied to a complex or large database that will cause a long loading time → use Search with Auto-Suggest (coming soon).

General

In case the list is the main component presented in the area or section of the interface (e.g. in a filter panel or in a modal window), the focus will be set to the search field automatically to aid the user in conducting a fast search.

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Design

See Search

Code

See Search