...

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

Image Modified

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

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.

...

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 Modified

Contains

The search string may appear anywhere within a result

Image Modified

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.

Image Modified

Clear All

Image Modified

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
Regular	Image Modified	Image Modified
Hover	Image Modified	Image Modified
Active	Image Modified	Image Modified
Disabled	Image Modified	N/A
Error (See Field Validation for more details).	N/A	N/A
Focused	Image Modified	Image Modified
Focused, Hover	Image Modified	Image Modified
Focused, Active	Image Modified	Image Modified

Interaction

See Live Search and Search with Auto-suggest (coming soon).

Validations and Errors

See Live Search and Search with Auto-suggest (coming soon).

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

...

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
https://zpl.io/25Gz0na	Image Modified

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 73	New Version 74
Changes made by	Yehiel Elad-Certner (Unlicensed)	Carlie Bradshaw
Saved on	Feb 15, 2021	Apr 20, 2022

Content Comparison

Versions Compared

Key

Types

Usage & Behavior

General guidelines

Structure

Clear All

States

Interaction

Validations and Errors

Best Practice

Accessibility compliance

Design

Code