Lead: Shani Laendler (Unlicensed) (with the dedicated help of Asaf Ben-Oved )

Status:

Status

colour	Blue
title	done

Related Pages: Searchable Dropdown Menu

Table of Contents

Description

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

Image Removed

Types

...

Type

...

Description

...

Example

...

Live Search

...

Live search (aka "active search", “incremental search” or “search-as-you-type”) is a search type in which each character that the user enters or deletes runs the search query. This type is usually suitable for small-medium databases

...

Search with auto-suggest

...

In this search type the system autosuggest terms as the user types 2 or more characters. The search itself is being conducted only after manually running it (by selecting a suggestion, clicking "search" or 'Enter'). This type of search is usually suitable for complex and big database search

Usage & Behaviour

General Guidlines

Structure

Magnifier icon: placed at the right area of text field. In Manual search, the user may click the magnifier icon button to initiate the search. In Live search the magnifier icon functions as an additional indicator to the search input field.
Hint and text input: left-aligned.
'x' icon (clear): right-aligned. The “x” is replacing the magnifier icon in “live search” and added to the magnifier icon in “search with auto-suggest”

Content

Empty search field includes a hint text.
The hint text must start with the word 'Search' to indicate the search functionality.
The next word/s should provide helpful context and imply the results type (e.g. 'search employee', 'search custom data field').

Length

The search field should be in the minimum width of 27 characters.

Internal Logic

Clear All

Image Removed

“Clear all” is presented using an "x" icon.
The "x" is presented after the first character is typed, and disappears when the text is cleared (both manually or using the "x" button)
Clicking the "x" will: (1) delete all characters (2) focus on the text field, so that new search term can be entered.

Search logic

2 search approaches may be applied (should be considered according to the specific need):

“Type-ahead”: all results will start with the typed string. For example:

Image Removed

“Contains”: the search string may appear within a result.

Image Removed

Select the appropriate approach according to:

The users' knowledge and expected behaviour: do they know the full name of the item? how familiar they are with the list terminology and the structure of each item?
The list content and design: does it include complex items (e.g. agents names)? does it have a complex design (e.g. a combination of numbers and strings)?

The “type-ahead” approach should be the default approach, yet the more complex the list is, and the less knowledge the user have, tend to choose the “contain” approach to provide more flexibility to the user.

String Highlight

The searched string is highlighted in bold within the list of results:

Image Removed

Exceptions- an additional background color will be added to the bold string in these cases:

Image Removed

Searched items are presented in bold within the list of result (regardless of the search string)
There are other (non-searchable) bold items within the set of results that may cause confusion (e.g. bold titles in an hierarchical view)

Suggestions (Optional)

Image Removed

When focusing on an empty search field, a list of suggestions may be displayed to aid the user conduct a quick search.

List definitions:

The list will include up to 8 items
The list will include recent searches and/or popular/trending searches.
- Recent item are items that the specific user searched for in the past. They will be presented only after conducting at list one search and will include the most recent searches only.
- Popular items are items that are being searched by many users in many occasions
- Trending item are items that are being searched by many users in many occasions, on a recent defined time frame.
- The number of recent and popular/trending items should be equal. If there’s not enough data to provide an equal amount of both types the list may be divided unequally.
Recent items will be placed above popular/trending items
Each item will be accompanied with an icon, indicating the type of suggestion (recent or popular)

Use the suggestion list only if the user is expected to search for previously searched queries or popular/trending queries.

Search Query

...

The search query should NOT be case sensitive (e.g. search for “RAR” is equal to “rar”, “Rar”, “RaR”, etc.)

Using spaces in the query

...

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

...

Related Pages: Searchable Drop-down Menu

Table of Contents

Description

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

...

Image 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.	Image 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 Added

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-ahead

All results will start with the typed string.

Image Added

Image Added

Contains

The search string may appear anywhere within a result

Image Added

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

...

Clear All

...

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-

Live Search

Filled - Search with auto-suggest

in
Regular

Image Removed

Image Added

Image RemovedTBD

Image Added

Hover

Image RemovedTBD

Image Added

Image Removed

Image Added

Active

Image RemovedTBD

Image Added

Image Removed

Image Added

Disabled

Image Removed

Image Added

-

Image Added

TBD

Error

Applies to “search with auto-suggest” only - TBD

(See Field Validation for more details)

-

Image Removed

N/A	N/A
Focused

Image Removed

TBD

Focused hover

Image Removed

TBD

Focused active

Image Removed

TBD

Interaction

...

Image Added	Image Added
Focused, Hover	Image Added	Image Added
Focused, Active	Image Added	Image Added

Interaction

See Live Search and Search with autoAuto-suggest).

Validations and Errors

Varies per each search type (see See Live Search and Search with autoAuto-suggest).

Best Practice

Use when:

The
the searched list has more than 10 items.
Users
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
the searched list has 10 items or
less
fewer.
The
the user wants to browse through the data or to look for datasets, and is not looking for specific items
(in this case use filters)The user doesn’t know what he’s looking for
→ use Filters.

Accessibility compliance

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

Design

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

Image Removed

Image Added

Code

Html macro

sanitize	false

<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/bootstrap-tooltip-custom-class.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">

<script>
$(function () {
			$('.form-control[type="search"]

...

~ .

...

clear-button').click(function()
			{
			    if( $(this).prev().prev().val() ) {
			          $(this).prev().prev().val('').focus();
			    }
			});
		});


$(function () {
		  $('[data-toggle="tooltip"]').tooltip({trigger: 'hover', delay: { "show": 100, "hide": 0 }});
		  
		  $('.is-invalid, .is-warning').on('shown.bs.tooltip', function () {
			  var x = $(this).offset().left + $(this).width();
			  var y = $(this).offset().top;
			  
			  $('.bs-tooltip-right').css('transform', 'translate3d('+x+'px, '+y+'px, 0px)');
		  });
		});
</script>


<div class="card">
			<div class="card-header">Search Field <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
			<div class="card-body">
				<form>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
						<div class="col-lg-4">
							<input type="search" class="form-control form-control-sm

...

" placeholder="Search">
							<div class="btn icon-btn btn-sm search-button">
								<i class="icon-search"></i>
							</div>
							<button class="btn icon-btn icon-btn-light btn-sm

...

clear-button" type="button"

...

>
								<i class="icon-

...

delete"></i>
							</button>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><input type="search" class="form-control form-control-sm" placeholder="Search

...

">
<div class="btn icon-btn btn-sm search-button">
	<i class="icon-search"></i>
</div>
<button class="btn icon-btn icon-btn-light btn-sm

...

clear-button" type="button

...

">
	<i class="icon-

...

delete"></i>
</button></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm"></label>
						<div class="col-lg-4">
							<input type="search" class="form-control form-control-sm" placeholder="Search" value="

...

Filled">
							<div class="btn icon-btn btn-sm search-button">
								<i class="icon-search"></i>
							</div>
							<button class="btn icon-btn icon-btn-light btn-sm

...

clear-button" type="button"

...

>
								<i class="icon-

...

delete"></i>
							</button>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><input type="search" class="form-control form-control-sm" placeholder="Search" value="Filled

...

">
<div class="btn icon-btn btn-sm search-button">
	<i class="icon-search"></i>
</div>
<button class="btn icon-btn icon-btn-light btn-sm

...

clear-button" type="button"

...

>
	<i class="icon-

...

delete"></i>
</button></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled</label>
						<div class="col-lg-4">
							<input type="search" class="form-control form-control-sm" placeholder

...

="Search" disabled>
							<div class="btn icon-btn icon-btn-light btn-sm search-button" disabled>
								<i class="icon-search"></i>
							</div>
							<button class="btn icon-btn icon-btn-light btn-sm

...

clear-button" type="button" tabindex="-1" disabled>
								<i class="icon-

...

delete"></i>
							</button>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><input type="search" class="form-control form-control-sm" placeholder="Search

...

" disabled>
<div class="btn icon-btn icon-btn-light btn-sm search-button" disabled>
	<i class="icon-search"></i>
</div>
<button class="btn icon-btn icon-btn-light btn-sm

...

clear-button" type="button" tabindex="-1" disabled>
	<i class="icon-

...

delete"></i>
</button></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm"></label>
						<div class="col-lg-4">
							<input type="search" class="form-control form-control-sm" placeholder="Search" value="Filled" disabled>
							<div class="

...

btn icon-btn icon-btn-light btn-sm search-button" disabled>
								<i class="icon-search"></i>
							</div>
							<button class="btn icon-btn icon-btn-light btn-sm

...

clear-button" type="button

...

 disabled>
								<i class="icon-

...

delete"></i>
							</button>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><input type="search" class="form-control form-control-sm" placeholder="Search" value="Filled" disabled>

...

<div class="btn icon-btn icon-btn-light btn-sm search-button"

...

 disabled>
	<i class="icon-search"></i>
</div>
<button class="btn icon-btn icon-btn-light btn-sm clear-button"

...

type="

...

button" disabled>
	<i class="icon-

...

delete"></i>
</button></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Error</label>
						<div class="col-lg-4">
							<input type="search" class="form-control form-control-sm is-invalid" placeholder="Search" data-toggle="tooltip" data-custom-class="input-error" data-placement="right" title="There is an Error on the

...

 Search Field">
							<div class="btn icon-btn btn-sm search-button">
								<i class="icon-search"></i>
							</div>
							<button class="btn icon-btn icon-btn-light btn-sm

...

clear-button" type="button

...

">
								<i class="icon-

...

delete"></i>
							</button>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><input type="search" class="form-control form-control-sm is-invalid" placeholder="Search">
<div class="btn icon-btn btn-sm search-button">
	<i class="icon-search"></i>
</div>
<button class="btn icon-btn icon-btn-light btn-sm

...

clear-button"

...

type="

...

button">
	<i class="icon-

...

delete"></i>
</button></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Error</label>
						<div class="col-lg-4">
							<input type="search" class="form-control form-control-sm is-invalid" placeholder="Search" value="Filled" data-toggle="tooltip" data-custom-class="input-error" data-placement="right" title="There is an Error on the Search

...

 Field">
							<div class="btn icon-btn btn-sm search-button">
								<i class="icon-search"></i>
							</div>
							<button class="btn icon-btn icon-btn-light btn-sm

...

clear-button" type="button"

...

>
								<i class="icon-

...

delete"></i>
							</button>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><input type="search" class="form-control form-control-sm is-invalid" placeholder="Search" value="Filled">
<div class="btn icon-btn btn-sm search-button">
	<i class="icon-search"></i>
</div>
<button class="btn icon-btn icon-btn-light btn-sm

...

clear-button" type="button

...

">
	<i class="icon-

...

delete"></i>
</button></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>

Version	Old Version 49	New Version Current
Changes made by	Femi	Hasitha Jayarathne
Saved on	Jul 30, 2020	Dec 24, 2024

Content Comparison

Versions Compared

Key

Description

Types

Usage & Behaviour

General Guidlines

Structure

Content

Length

Internal Logic

Clear All

Search logic

String Highlight

Suggestions (Optional)

Search Query

Description

Types

Usage & Behavior

General guidelines

Structure

Content

Length

Internal Logic

Search Query

Search logic

Clear All

States

Interaction

Interaction

Validations and Errors

Best Practice

Accessibility compliance

Design

Code