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

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>
Copy

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 -->
Copy

JavaScript behavior

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.