Header Search
How to use?
Copy-paste the following <script> near the end of your pages under JS Nova to enable it.
<script src="../../assets/js/components/hs.header-search.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of show on type module
$.HSCore.components.HSHeaderSearch.init('.js-header-search');
});
</script>
Basic example
<!-- Header Search -->
<div class="js-header-search position-relative"
data-search-target="#headerSearchDemoResults"
data-search-mobile-invoker="#headerSearchDemoMobileInvoker"
data-search-form="#headerSearchDemoForm"
data-search-field="#headerSearchDemoField"
data-search-clear="#headerSearchDemoResultsClear">
<a id="headerSearchDemoMobileInvoker" class="header-search-invoker header-invoker" href="#">
<i class="nova-search"></i>
</a>
<form id="headerSearchDemoForm" class="header-search input-group input-group-merge w-100" action="#">
<input id="headerSearchDemoField" class="header-search-input form-control form-control-append-icon bg-white rounded pl-3 pr-5" type="text" placeholder="Search nova database">
<div class="input-group-append-merge focus-hide">
<a class="btn text-muted bg-transparent border-0 p-0 lh-1" href="#">
<i class="nova-search icon-text"></i>
</a>
</div>
<div class="input-group-append focus-show">
<a id="headerSearchDemoResultsClear" class="btn text-muted bg-transparent border-0 p-0 lh-1" href="#">
<i class="nova-close icon-text"></i>
</a>
</div>
<div id="headerSearchDemoResults" class="unfold unfold-light unfold-top unfold-centered position-absolute w-100 rounded mt-3">
<div class="border-bottom px-3 px-md-4 py-3">
<h6 class="font-weight-semi-bold mb-3">Projects</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<a class="link-dark" href="#">Technical delivery call</a>
</li>
<li class="mb-2">
<a class="link-dark" href="#">R&D meeting</a>
</li>
<li class="mb-2">
<a class="link-dark" href="#">Discuss campaign performance</a>
</li>
<li class="mb-0">
<a class="link-dark" href="#">SciFi Writing Group</a>
</li>
</ul>
</div>
<div class="border-bottom px-3 px-md-4 py-3">
<h6 class="font-weight-semi-bold mb-3">Projects</h6>
<ul class="list-unstyled mb-0">
<li class="mb-2">
<a class="link-dark media align-items-center" href="#">
<img class="avatar rounded-circle mr-2" src="../../assets/img/100x100/img4.jpg" width="40" alt="Image description">
<div class="media-body">
<h6 class="font-weight-semi-bold mb-0">Frances James</h6>
</div>
</a>
</li>
<li class="mb-2">
<a class="link-dark media align-items-center" href="#">
<img class="avatar rounded-circle mr-2" src="../../assets/img/100x100/img6.jpg" width="40" alt="Image description">
<div class="media-body">
<h6 class="font-weight-semi-bold mb-0">Susie Gibbs</h6>
</div>
</a>
</li>
<li class="mb-2">
<a class="link-dark media align-items-center" href="#">
<img class="avatar rounded-circle mr-2" src="../../assets/img/100x100/img12.jpg" width="40" alt="Image description">
<div class="media-body">
<h6 class="font-weight-semi-bold mb-0">Gertrude Ramsey</h6>
</div>
</a>
</li>
</ul>
</div>
<footer class="px-3 px-md-4 py-3">
<a class="link" href="#">Show all (24) Results</a>
</footer>
</div>
</form>
</div>
<!-- End Header Search -->
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-search-target="".
| Attribute | Description |
|---|---|
data-search-target |
ID of the hidden block in which the search result is generated. |
data-search-mobile-invoker |
ID of the element, when clicked, the search field will be called at resolution less than 768px. |
data-search-form |
ID of the search form. |
data-search-field |
Search field ID. |
data-search-clear |
ID of the item, when clicking on which the search field will be cleared. |