Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Search enables users to find relevant content in a List or dataset by specifying a word, phrase, or query.

...

Search - Active filled bi.pngImage Added

Types

Type

Description

Example

Live Search

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

  • Each character that the user enters or deletes runs the search query.

  • This type of search is usually suitable for small-medium databases.

Search - Regular.pngImage RemovedSearch - Regular.pngImage Added

Search with Auto-Suggest

  • The system automatically suggests terms after the user has typed 2 or more characters.

  • The search itself runs only after the user triggered it, by selecting a suggestion, clicking the search icon, or hitting the Enter key.

  • This type of search is usually suitable for large and complex databases.

Image RemovedAuto suggest mode 1.pngImage Added

Usage & Behavior

...

Type

Description

In Live Search Mode

In Auto-Suggest Mode

Type-ahead

All results will start with the typed string.

Image RemovedLive search mode 1.pngImage AddedImage RemovedAuto suggest mode 1.pngImage Added

Contains

The search string may appear anywhere within a result

Image RemovedLive search mode 2.pngImage AddedImage RemovedAuto suggest mode 2.pngImage Added
  • Type-ahead should be the default approach. However, consider using the contains approach when:

    • The user is not familiar with the list terminology or the full name of the item.

    • The list includes complex items, such as agent names or combinations of numbers and strings.

  • An additional background color will be added to the bold string in these cases:

    • When the searched items are already presented in bold within the list of results.

    • Where there are other, non-searchable bold items within the set of results list, such as bold headers in a hierarchical list, that may cause confusion.

...

State

Empty

Filled-in

Regular

Search - Regular.pngImage RemovedSearch - Regular.pngImage AddedSearch - Regular filled.pngImage RemovedSearch - Regular filled.pngImage Added

Hover

Search - Hover.pngImage RemovedSearch - Hover.pngImage AddedSearch - Hover filled.pngImage RemovedSearch - Hover filled.pngImage Added

Active

Search - Active.pngImage RemovedSearch - Active.pngImage AddedSearch - Active filled.pngImage RemovedSearch - Active filled.pngImage Added

Disabled

Search - Disabled.pngImage RemovedSearch - Disabled.pngImage AddedSearch - Disabled filled.pngImage RemovedSearch - Disabled filled.pngImage Added

Error
(See Field Validation for more details)

N/A

N/A

Focused

Search - Focused.pngImage RemovedSearch - Focused.pngImage AddedSearch - Focused filled.pngImage RemovedSearch - Focused filled.pngImage Added

Focused, Hover

Search - Focused hover.pngImage RemovedSearch - Focused hover.pngImage AddedSearch - Focused hover filled.pngImage RemovedSearch - Focused hover filled.pngImage Added

Focused, Active

Search - Focused active.pngImage RemovedSearch - Focused active.pngImage AddedSearch - Focused active filled.pngImage RemovedSearch - Focused active filled.pngImage Added

Interaction

See Live Search and Search with Auto-suggest.

...