Lead: Shani Laendler (Unlicensed)

Description

Live search (aka "active search ", “incremental search” or “search-as-you-type”) is a search type in which 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

...

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

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

• In case Where the items list area is arranged in an a hierarchical tree view :

  • the search results

  may

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

Image Removed

Image Removed

• • .

  • 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

...

• In larger or more complex result setsitems.

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. Try adding that in any case when possible: , particularly for larger or more complex results lists.

...

Results Loading Time

The system should mitigate long loading times.

• Less than 0.1 secondseconds: no loader is needed.

• 0.1 - 5 second: loading spinner 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 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

Boarder colour changes

.

Click on the

text field

Text Field

Image Modified

Search is in focus.

Hint

The guiding / hint text is hidden.

Text mark is flickering

Suggestions:

The text cursor is blinking. (Optional) It is recommended that a suggestions list with recent and/or popular queries are

presented (optional)

used. See Search for more information.
Enter first letter	Image Modified	Suggestions are hidden (where used). The list is filtered.

Searched query

The searched string is highlighted in bold within the list of results. A Clear

all ("x") is presented

All icon button (X) appears.

Enter next

letter/s

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 RemovedClick on the “x”: (1) clears all characters (2) focus

.
Clear all (either manually or clicking the X button)	Image Added	Characters are cleared. The focus is set on the text field. The

"x" disappears when the text is cleared (both manually or using the "x" button)

X button disappears.

Validations and errors

There are no validations on syntaxthe search string.

No results found

...

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

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

Best Practice

Use when:

• The

  the database is small-medium

  and

  size.

• the results can be filtered immediately

  (

  , with no need to retrieve the data from the

  back-end)The results area

  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

...

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:

...

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

...

,

...

• 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

Code

Html macro

Accessibility compliance

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

Design

See Search

Code

See Search