...

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

...

• 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 items are is arranged in a hierarchical tree, :

  • the search results

  may

  • will also be presented in

  either

  • the same hierarchical view

  or as a simple list. See Best Practices below for guidelines on selecting the appropriate approach

  • .

  • 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:

Image Modified

Image Modified

• 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

Step	Visual Example	Description
Initial state	Image Modified

Hint

Guiding / hint text in grey.

Hover over the search field

Image Removed

• Border color changes.

Click on the Text Field	Image Modified	Search is in focus. The guiding / hint text is hidden. The text cursor is blinking. (Optional) It is recommended that a suggestions list with recent and/or popular queries are used. See Search for more information.
Enter first letter	Image Modified	Suggestions are hidden (where used). The list is filtered. The searched string is highlighted in bold within the list of results. A Clear All icon button (X) appears.
Enter next letters	Image Modified	The list is filtered to show relevant results.

Click on item in the list

Image Removed

• Focus is moved away from the search field.

Clear all

Image RemovedClicking on

(either manually or clicking the X button

:clears all characters

)

Image Added

Characters are cleared. The focus is set on the text field. The X button disappears

when the text is cleared (either manually or by using the X button)

.

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 . 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).

Automatic focus

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

...

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 list is presented upon request, e.g. on clicking to open filter panel, or clicking to open modal window.

...

• Where the list items are arranged in a hierarchical tree, the search results may be presented in either the same hierarchical view or as a simple list. See Best Practices below for guidelines on selecting the appropriate approach.

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

Hierarchical tree view vs. simple list

Where the list items are arranged in a hierarchical tree, the search results may be presented in either the same hierarchical view or as a simple list. Select the most appropriate type:

• Is the search expected to produce a single or multiple results?

  • If the search is expected to produce a single result → a simple list may be sufficient.

  • If the search is expected to produce multiple results → use the hierarchical tree view where appropriate.

• If several results may have a similar name and the parent category may help in differentiating between results → use the hierarchical tree view.

• If the parent category may be searched itself → use the hierarchical tree view.

), 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

...

Zeplin link

...

Screen thumbnail

...

https://zpl.io/25Gz0na

...

Code

Html macro

Code

See Search