Lead:  << Your name/s >> << Select the status -       >>

Related Pages: << Links to related pages, if relevant >>

...

Description

...

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

Magnifying glass icon

As indication only. Does not operate as button, since the search is conducted live.

Search logic:

• The search is being conducted for any part of the term ("contains" approach). For example, the string "re" may return "revert", "correct" or "before".  

Results:

...

Results Presentation

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

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

• The searched string will be highlighted within the text.

• Loading results: .

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

Image Added

Image Added

• 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

  second

  seconds: no loader is needed.

• 0.1 -

  1 second: TBD.1-

  5 seconds:

  loading spinner

  use a circular Progress Indicator with the text

  "

  Searching <Categories>...

  "

• More than 5 seconds:

  mmm this search type is probably not the best solution (go with more complex search type that does not filter immediately) 

...

• Option 2: loader within the field and list area as a placeholder for the results:

...

List Types

• Hierarchy:

  • The full list may be displayed in hierarchy 

  • In most cases the search results will also be displayed in hierarchical view (Google Settings search as reference):

...

• In some cases the search results should not be displayed as a flat list, and not in hierarchical view. See 'Best Practices' section for more details.

Automatic focus on search Field

• Auto-focused on the search field allows fast search and reduces clicks.  

• Search will be auto-focused when these 2 conditions occur:

  The list is the only/

  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 Added	Guiding / hint text in grey.
Click on the Text Field	Image Added	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 Added	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 Added	The list is filtered to show relevant results.
Clear all (either manually or clicking the X button)	Image Added	Characters are cleared. The focus is set on the text field. The X button disappears.

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 list is presented upon request (e.g. click to open filter panel, click to open window).

Example:

...

, 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