Form Search
Form search plugin with clearing value options.
Cara Pakai
Copy-paste script berikut sebelum tag penutup <body>:
<script>
(function () {
// INITIALIZATION OF FORM SEARCH
// =======================================================
new NueFormSearch('.js-form-search')
})()
</script>
Example
<!-- Form -->
<div class="mb-4 w-md-50">
<div class="input-group input-group-merge">
<input type="text" class="js-form-search form-control" placeholder="Search..."
data-nue-form-search-options='{
"clearIcon": "#clearIconBasicEg"
}'>
<button type="button" class="input-group-append input-group-text">
<i id="clearIconBasicEg" class="bi-x-lg" style="display: none;"></i>
</button>
</div>
</div>
<!-- End Form -->
Toggle icon
<!-- Form -->
<div class="mb-4 w-md-50">
<div class="input-group input-group-merge">
<input type="text" class="js-form-search form-control" placeholder="Search..."
data-nue-form-search-options='{
"clearIcon": "#clearIcon2",
"defaultIcon": "#defaultClearIconToggleEg"
}'>
<button type="button" class="input-group-append input-group-text">
<i id="clearIcon2" class="bi-x-lg" style="display: none;"></i>
<i id="defaultClearIconToggleEg" class="bi-search" style="display: none;"></i>
</button>
</div>
</div>
<!-- End Form -->
Loading event
<!-- Form -->
<div class="mb-4 w-md-50">
<div class="input-group input-group-merge">
<input type="text" class="form-control" id="type-loading" placeholder="Search..."
data-nue-form-search-options='{
"clearIcon": "#clearIconLoadingEg",
"defaultIcon": "#clearIconLoadingDefaultEg",
"loadingIcon": "#typeLoadingIconEg"
}'>
<button type="button" class="input-group-append input-group-text">
<i id="clearIconLoadingEg" class="bi-x-lg" style="display: none;"></i>
<i id="clearIconLoadingDefaultEg" class="bi-search" style="display: none;"></i>
<span id="typeLoadingIconEg" class="spinner-border spinner-border-sm text-primary" role="status" style="display: none;">
<span class="sr-only"></span>
</span>
</button>
</div>
</div>
<!-- End Form -->
<script>
(function () {
const clearTypeLoading = new NueFormSearch('#type-loading').getItem(0)
clearTypeLoading.$el.addEventListener('input', function() {
clearTypeLoading.loading()
if (!clearTypeLoading.$el.value.length) {
clearTypeLoading.loading(false)
}
})
clearTypeLoading.$el.addEventListener('change', function() {
clearTypeLoading.loading(false)
})
})()
</script>
<!-- Form -->
<div class="mb-4 w-md-50">
<div class="input-group input-group-merge">
<input type="text" class="form-control" id="clear-input-loading" placeholder="Search..."
data-nue-form-search-options='{
"clearIcon": "#clearIconLoadingBtn",
"defaultIcon": "#defaultClearIconLoadingBtn",
"loadingIcon": "#loadingClearIcon"
}'>
<button type="button" class="input-group-append input-group-text">
<i id="clearIconLoadingBtn" class="bi-x-lg" style="display: none;"></i>
<i id="defaultClearIconLoadingBtn" class="bi-search" style="display: none;"></i>
<span id="loadingClearIcon" class="spinner-border spinner-border-sm text-primary" role="status" style="display: none;">
<span class="sr-only"></span>
</span>
</button>
</div>
</div>
<!-- End Form -->
<button id="loadBtn" class="btn btn-primary">Click for loading</button>
<script>
(function () {
const clearInputLoading = new NueFormSearch('#clear-input-loading').getItem(0)
const $loadingBtn = document.querySelector('#loadBtn')
$loadingBtn.addEventListener('click', function() {
$loadingBtn.setAttribute('disabled', true);
clearInputLoading.loading()
setTimeout(function() {
clearInputLoading.loading(false);
$loadingBtn.removeAttribute('disabled');
}, 2000);
})
})()
</script>
Drop menu
Recent searchesTutorials
Members
See all results
How to set up Gulp?
How to change theme color?
Amanda Harvey
David Harrison
A
Anne Richard
<div class="position-relative w-md-50 z-index-2">
<!-- Form -->
<div class="mb-4">
<div class="input-group input-group-merge">
<input type="text" class="js-form-search form-control" placeholder="Search..."
data-nue-form-search-options='{
"clearIcon": "#clearIconMenuEg",
"defaultIcon": "#defaultIconMenuEg",
"dropMenuElement": "#dropMenuEg",
"dropMenuOffset": 20
}'>
<button type="button" class="input-group-append input-group-text">
<i id="clearIconMenuEg" class="bi-x-lg" style="display: none;"></i>
<i id="defaultIconMenuEg" class="bi-search" style="display: none;"></i>
</button>
</div>
</div>
<!-- End Form -->
<!-- Drop Menu -->
<div id="dropMenuEg" class="nue-form-search-menu-content dropdown-menu dropdown-menu-form-search navbar-dropdown-menu-borderless">
<!-- Body -->
<div class="card-body-height">
<span class="dropdown-header">Recent searches</span>
<div class="dropdown-item bg-transparent text-wrap">
<a class="btn btn-soft-dark btn-xs rounded-pill" href="../index.html">
Gulp <i class="bi-search ms-1"></i>
</a>
<a class="btn btn-soft-dark btn-xs rounded-pill" href="../index.html">
Notification panel <i class="bi-search ms-1"></i>
</a>
</div>
<div class="dropdown-divider"></div>
<span class="dropdown-header">Tutorials</span>
<a class="dropdown-item" href="../index.html">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<span class="icon icon-soft-dark icon-xs icon-circle">
<i class="bi-sliders"></i>
</span>
</div>
<div class="flex-grow-1 text-truncate ms-2">
<span>How to set up Gulp?</span>
</div>
</div>
</a>
<a class="dropdown-item" href="../index.html">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<span class="icon icon-soft-dark icon-xs icon-circle">
<i class="bi-paint-bucket"></i>
</span>
</div>
<div class="flex-grow-1 text-truncate ms-2">
<span>How to change theme color?</span>
</div>
</div>
</a>
<div class="dropdown-divider"></div>
<span class="dropdown-header">Members</span>
<a class="dropdown-item" href="../index.html">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-xs avatar-circle" src="../assets/img/160x160/img10.jpg" alt="Image Description">
</div>
<div class="flex-grow-1 text-truncate ms-2">
<span>Amanda Harvey <i class="bi-patch-check-fill text-primary" data-toggle="tooltip" data-placement="top" title="Top endorsed"></i></span>
</div>
</div>
</a>
<a class="dropdown-item" href="../index.html">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<img class="avatar avatar-xs avatar-circle" src="../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
<div class="flex-grow-1 text-truncate ms-2">
<span>David Harrison</span>
</div>
</div>
</a>
<a class="dropdown-item" href="../index.html">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="avatar avatar-xs avatar-soft-info avatar-circle">
<span class="avatar-initials">A</span>
</div>
</div>
<div class="flex-grow-1 text-truncate ms-2">
<span>Anne Richard</span>
</div>
</div>
</a>
</div>
<!-- End Body -->
<!-- Footer -->
<a class="card-footer text-center" href="../index.html">
See all results <i class="bi-chevron-right small"></i>
</a>
<!-- End Footer -->
</div>
<!-- End Drop Menu -->
</div>
Modal example
Form search
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Open modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Form search</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Form -->
<div class="mb-4">
<div class="input-group input-group-merge">
<input type="text" class="js-form-search form-control" placeholder="Search..."
data-nue-form-search-options='{
"clearIcon": "#clearIconModalEg"
}'>
<button type="button" class="input-group-append input-group-text">
<i id="clearIconModalEg" class="bi-x-lg" style="display: none;"></i>
</button>
</div>
</div>
<!-- End Form -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
Methods
| Parameters | Description | Default value |
|---|---|---|
clearIcon | An element that when clicked will clear the field. |
null |
defaultIcon | The element that will be the default instead clearIcon. |
null |
loadingIcon | The element that will be instead clearIcon and defaultIcon on loading. |
null |
delay | Animation delay. |
300 |
dropMenuElement | Drop menu element. |
null |
dropMenuOffset | Drop menu top offset. |
0 |
activeClass | Class which will be added when input search is active. |
null |
Events
| Name | Description |
|---|---|
clear | Triggered when the field is cleared |