...
The searched string will be highlighted in bold within the list of results.
The results are displayed in the results list according to the existing sort method.
Where the items list items are is arranged in a hierarchical tree, :
the search results
will also be presented in
the same hierarchical view
.
the user will be able to search on all hierarchies, unless otherwise specified.
If the results are presented in a hierarchical view, all sections will be auto-expanded to show the searched items.
...
Don’t use when the query is applied to a complex or large database that will cause a long loading time → use Search with Auto-Suggest (coming soon).
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:
...
General
In case the list is the 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. on clicking to open filter panel, or clicking to open modal window.
...
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:
If the search is expected to produce a single result → a simple list may be sufficient.
Use hierarchical tree view when:
the search is expected to produce multiple results
several results may have a similar name and the parent category may help in differentiating between results
the parent category may be searched itself
), the focus will be set to the search field automatically to aid the user in conducting a fast search.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
...
Zeplin link
...
Screen thumbnail
...
...
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> |
...