Table of Contents

Description

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

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

Usage and

...

Behavior

General Guidelines

Internal Logic

...

The searched string will be highlighted in bold within the textlist of results.
The results are displayed in the results list area according to the existing sort method.
In case Where the list area is items are arranged in an a hierarchical tree view , the search results may be presented in either the same hierarchical view or as a simple list. See 'Best Practices' section below for guidelines on selecting the appropriate approach. Example for hierarchical view in the search results:

Image Removed

...

- If the results are presented in

...

- a hierarchical view, all

...

- sections will be auto-expanded to

...

- show the searched

...

In larger or more complex result sets
- items.

Example of a hierarchical view in the results list:

Image Added

Where possible, consider presenting the number of results in a prominent area. Try adding that in any case when possible:

Image Removed

, particularly for larger or more complex results lists.

Image Added

Results Loading Time

The system should mitigate long loading times.

Less than 0.1 secondseconds: no loader is needed.
0.1 - 5 second: loading spinner seconds: use a circular Progress Indicator with the text "Searching <Categories>..."

...

More than 5 seconds: this loading time is too long for “Live Search”. Use Live Search → use Search with Auto-Suggest instead.

Image Added

Interaction

Step	Visual Example	Description
Initial state		Hint text in grey.
Hover over the search field		Boarder Border colour changes.
Click on the text field Text Field		Search is in focus. Hint The hint text is hidden. Text mark is flickering Suggestions: recent and/or popular queries are presented (optional)The text cursor is blinking. (Optional) It is recommended that a suggestions list with recent and/or popular queries are used. See Search for more information.
Enter first letter		Suggestions are hidden (where used). The list is filtered. Searched query The searched string is highlighted in bold within the list of results. A Clear all ("x") is presentedAll icon button (X) appears.
Enter next letter/sletters		The list is filtered to show relevant results.
Click on item in the list		Focus is moved away from the search field.
Clear all		Click Clicking on the “x”: (1) clears all characters (2) X button: clears all characters. focus on the text field. The "x" X button disappears when the text is cleared ( both either manually or by using the "x" X button).

Validations and errors

There are no validations on syntaxthe search string.

No results found

The results area will clearly state that no results were found.
The text will say "no No <items> were found" (e.g. no , for example No categories were found, no or No employees were found).

Best Practice

Use when:

The
the database is small-medium
and
size.
the results can be filtered immediately
(
, with no need to retrieve the data from the
back-end)The results area
backend.
the results list is located below and near the search field.

Don’t use when:

When
the query is applied
on
to a complex or
big
large database that will cause a long loading time
. In such case
→ use Search with Auto-Suggest.

Automatic focus

...

Use auto-focus on the search field to aid the user in conducting a fast search (, and to reduce clicks). Make sure to use it under these conditions:
- The list is the only /or main component presented in the area or section (of the interface, e.g. in a filter panel or in a modal window).
- The list is presented upon request (, e.g. click on clicking to open filter panel, click or clicking to open modal window)

...

Display results in an hierarchical
- .

...

Where the list items are arranged in a hierarchical tree, the search results may be presented in either the same hierarchical view or as a simple list. See Best Practices below for guidelines on selecting the appropriate approach.
- If the results are presented in a hierarchical view, all sections will be auto-expanded to show the searched items.

Hierarchical tree view vs. simple

...

list

Where the list items are arranged in a hierarchical tree, the search results may be presented in

...

either the same hierarchical view or as a simple list. Select the most appropriate type:

Is the search expected to produce a single or multiple results?
(if single than list is probably good enough)
- If the search is expected to produce a single result - → a flat simple list may be sufficient.
- If the search is expected to produce multiple results - tend to select the → use the hierarchical tree view where appropriate.
If several results may have a similar name and the
root
parent category may help in differentiating between results
- select a
→ use the hierarchical tree view.
If the
root
parent category may be searched
by
itself
- select
→ use the hierarchical tree view.

Future Version (TBD)

Search on a simple list with multi-select.
Search on a tree view with multi-select.

Accessibility compliance

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

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('');
			    }
			});
		});


$(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 26	New Version 27
Changes made by	Yehiel Elad-Certner (Unlicensed)	Carlie Bradshaw
Saved on	Aug 10, 2020	Aug 11, 2020

Content Comparison

Versions Compared

Key

Description

Usage and

Behavior

General Guidelines

Internal Logic

Results Loading Time

Interaction

Validations and errors

Best Practice

Future Version (TBD)

Accessibility compliance

Code