...
Search enables users to find relevant content in a List or dataset by specifying a word, phrase, or query.
...
Types
Type | Description | Example |
|---|---|---|
|
 | |
|
 |
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. |
 |
| |
Contains | The search string may appear anywhere within a result |
 |
 |
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 |
|
 |
Hover |
 |
 |
Active |
 |
 |
Disabled |
 |
 |
Error |
N/A | N/A | |
Focused |
 |
 |
Focused, Hover |
 |
 |
Focused, Active |
 |
 |
Interaction
See Live Search and Search with Auto-suggest.
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
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> |
...