Lead: Shani Laendler (Unlicensed) (with the dedicated help of Asaf Ben-Oved 
)
...
Type | Description | Example |
|---|---|---|
Live search (aka "active search", “incremental search” or “search-as-you-type”) is a search type in which each character that the user enters or deletes runs the search query. This type is usually suitable for small-medium databases | ||
In this search type the system autosuggest terms as the user types 2 or more characters. The search itself is being conducted only after manually running it (by selecting a suggestion, clicking "search" or 'Enter'). This type of search is usually suitable for complex and big database search |
...
Empty search field includes a hint text.
The hint text must start with the word 'Search' to indicate the search functionality.
The next word/s should provide helpful context and imply the results type (e.g. 'search employee', 'search custom data field').
Length
The search field should be in the minimum width of 27 characters.
Internal Logic
...
| Html macro | ||
|---|---|---|
| ||
<link rel="stylesheet" href="https://ux.verint.com/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/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"] + .search-button').click(function()
{
if( $(this).prev().val() ) {
$(this).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">
<button class="btn icon-btn icon-btn-light btn-sm search-button" type="button" tabindex="-1">
<i class="icon-search"></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">
<button class="btn icon-btn icon-btn-light btn-sm search-button" type="button" tabindex="-1">
<i class="icon-search"></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">
<button class="btn icon-btn icon-btn-light btn-sm search-button" type="button" tabindex="-1">
<i class="icon-search"></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">
<button class="btn icon-btn icon-btn-light btn-sm search-button" type="button" tabindex="-1">
<i class="icon-search"></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>
<button class="btn icon-btn icon-btn-light btn-sm search-button" type="button" tabindex="-1" disabled>
<i class="icon-search"></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>
<button class="btn icon-btn icon-btn-light btn-sm search-button" type="button" tabindex="-1" disabled>
<i class="icon-search"></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>
<button class="btn icon-btn icon-btn-light btn-sm search-button" type="button" tabindex="-1" disabled>
<i class="icon-search"></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>
<button class="btn icon-btn icon-btn-light btn-sm search-button" type="button" tabindex="-1" disabled>
<i class="icon-search"></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">
<button class="btn icon-btn icon-btn-light btn-sm search-button" type="button" tabindex="-1">
<i class="icon-search"></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">
<button class="btn icon-btn icon-btn-light btn-sm search-button" type="button" tabindex="-1">
<i class="icon-search"></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">
<button class="btn icon-btn icon-btn-light btn-sm search-button" type="button" tabindex="-1">
<i class="icon-search"></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">
<button class="btn icon-btn icon-btn-light btn-sm search-button" type="button" tabindex="-1">
<i class="icon-search"></i>
</button></script></code></pre>
</div>
</div>
</form>
</div>
</div> |
...