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

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

...

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.

...

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

...

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 78	New Version 79
Changes made by	Hasitha Jayarathne	Carlie Bradshaw
Saved on	Aug 28, 2024	Aug 28, 2024

Content Comparison

Versions Compared

Key