...
Description
Live search is a type 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.
...
Example of a hierarchical view in the results list:
 Image Modified |  Image Modified |
Where needed (and possible), consider presenting the number of results in a prominent area, particularly for larger or more complex results lists.
...
Results Loading Time
The system should mitigate long loading times.
Less than 0.1 seconds: no loader is needed.
0.1 - 5 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 Search with Auto-Suggest instead.
(Optional) Delay trigger of initial search until at least 3 characters have been entered to improve performance.
...
Interaction
Step | Visual Example | Description |
|---|
Initial state |  Image Modified | |
Click on the Text Field |  Image Modified | Search is in focus. The guiding / hint text is hidden. 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 |  Image Modified | Suggestions are hidden (where used). The list is filtered. The searched string is highlighted in bold within the list of results. A Clear All icon button (X) appears.
|
Enter next letters |  Image Modified | |
Clear all
(either manually or clicking the X button) |  Image Modified | |
Validations and errors
There are no validations on the search string.
No results found
...
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
See Search
Code
| Html macro |
|---|
|
<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>See Search
