...
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
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 search query should not be case sensitive. For example, searching for RAR is equal to rar, Rar, or RaR etc.)
Spaces in the query:
Spaces are included in the search string. For example, when searching “repeated c” the result “repeated calls” may be found.
When searching a list of names (such as employees or agents), the space may be addressed as a separator between 2 distinct searches. For example, when searching “sh kl” the employee “Shiri Klein” may be found.
Search logic
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.
...
The searched string is highlighted in bold within the list of results:
 |
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.
...
Clear All
...
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.
Recent / Popular Searches (optional)
 |
When an empty search field is in focus, a list of recent or popular/trending suggestions may be displayed to enable the user to conduct a quick search.
The suggestions list will include up to 8 items.
Recent items are strings that the specific user has searched for in the past. They will be presented only after the user has conducted at least one previous search, and will include the most recent searches only.
Popular items are strings that are being frequently searched by a lot of users.
Trending items are strings that are being frequently searched by a lot of users, within a recent time frame.
The number of recent and popular/trending items should be equal, unless there’s not enough data to provide an equal amount of both types. In this case the list may be divided unequally.
Recent items will be placed above popular/trending items.
Each item will be accompanied by an icon, indicating the type of suggestion (recent or popular/trending).
Use this component only if the user is expected to search for previously searched queries or popular/trending queries.
States
State | Empty |
|---|
Live Search
Filled-in |
|---|
Regular |
|  |
Hover |
 |  |
Active |
 |  |
Disabled |
N/A
 |  |
Error |
N/A | N/A |
Focused |
 |  |
Focused, Hover |
 |  |
Focused, Active |
 |  |
Interaction
See Live Search and Search with Auto-suggest.
Validations and Errors
See Live Search and Search with Auto-suggest.
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
See Live Search and Search with Auto-suggest.
Code
...
Zeplin link | Screen thumbnail |
|---|---|
 |
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> |