Related Pages: Searchable Drop-down Menu

Description

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

Open

Types

Type	Description	Example

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

Usage & Behavior

General guidelines

Structure

Search consists of:

• A Text Field, where the user can enter their search.

• A magnifier icon, placed within the text field, to the right.

• A guiding/hint text, placed within the text field, left-aligned.

• A Clear All icon button (X). Appears to the left of the magnifier icon once a character has been entered in the text field.

Content

• The hint text must start with the word Search to indicate the search functionality.

• The next words should provide helpful context and describe the results type, for example Search employee or Search custom data field.

Length

• The search field should have a minimum width of 27 characters.

Internal Logic

Search Query

• The search query should not be case sensitive. For example, searching for RAR is equal to rar, Rar, or RaR etc.)

• Spaces in the query:

  • Spaces are included in the search string. For example, when searching “repeated c” the result “repeated calls” may be found.

  • When searching a list of names (such as employees or agents), the space may be addressed as a separator between 2 distinct searches. For example, when searching “sh kl” the employee “Shiri Klein” may be found.

Search logic

• The searched string is highlighted in bold.

• 2 types of search logic may be applied, according to the specific needs:

Type	Description	In Live Search Mode	In Auto-Suggest Mode

Type	Description	In Live Search Mode	In Auto-Suggest Mode
Type-ahead	All results will start with the typed string.	Open	Open
Contains	The search string may appear anywhere within a result	Open	Open

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

Open

Clear All

Open

• The X button appears after the first character is typed, and disappears when the text is cleared (either manually or by clicking the X button).

• Clicking the X button will:

  • delete all characters.

  • focus on the text field, so that new search term can be entered.

States

State	Empty	Filled-in

State	Empty	Filled-in
Regular	Open	Open
Hover	Open	Open
Active	Open	Open
Disabled	Open	Open
Error (See Field Validation for more details)	N/A	N/A
Focused	Open	Open
Focused, Hover	Open	Open
Focused, Active	Open	Open

Interaction

See Live Search and Search with Auto-suggest.

Validations and Errors

See Live Search and Search with Auto-suggest.

Best Practice

Use when:

• the searched list has more than 10 items.

• users are looking for specific items and know, to some extent, how to look for it (e.g. when supervisors are looking for their agents in a list).

Don’t use when:

• the searched list has 10 items or fewer.

• the user wants to browse through the data or to look for datasets, and is not looking for specific items → use Filters.

Accessibility compliance

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

Design

Zeplin link	Screen thumbnail

Zeplin link	Screen thumbnail
https://zpl.io/25Gz0na	Open

Code