Search.js

Website generic search. Customized version of AutoComplete plugin to work within the Bootstrap modal. Receives an options object. Uses a json file which contains objects that made of 'label' and 'url'. Initialized in the scripts.js file.

Javascript

var search = new Search({
  searchModalId: 'searchPagesModal',
  searchInputId: 'searchPagesInput',
  searchResultsId: 'searchPagesResults',
  placeholder: 'Search',
  loading: 'Loading',
  jsonPath: 'json/search.json'
});

Html

<!-- Search Modal Start -->
<div class="modal fade modal-under-nav modal-search modal-close-out" id="searchPagesModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header border-0 p-0">
        <button type="button" class="btn-close btn btn-icon btn-icon-only btn-foreground" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body ps-5 pe-5 pb-0 border-0">
        <input id="searchPagesInput" class="form-control form-control-xl borderless ps-0 pe-0 mb-1 auto-complete" type="text" autocomplete="off" />
      </div>
      <div class="modal-footer border-top justify-content-start ps-5 pe-5 pb-3 pt-3 border-0">
        <span class="text-alternate d-inline-block m-0 me-3">
          <i data-acorn-icon="arrow-bottom" data-acorn-size="15" class="text-alternate align-middle me-1"></i>
          <span class="align-middle text-medium">Navigate</span>
        </span>
        <span class="text-alternate d-inline-block m-0 me-3">
          <i data-acorn-icon="arrow-bottom-left" data-acorn-size="15" class="text-alternate align-middle me-1"></i>
          <span class="align-middle text-medium">Select</span>
        </span>
      </div>
    </div>
  </div>
</div>
<!-- Search Modal End -->

<!-- Search Button Start -->
<a href="#" data-bs-toggle="modal" data-bs-target="#searchPagesModal">
  <i data-acorn-icon="search" data-acorn-size="18"></i>
</a>
<!-- Search Button End -->

Json File

[
  {
      "label": "Apps > Calendar",
      "url": "Apps.Calendar.html"
  },
  {
      "label": "Apps > Chat",
      "url": "Apps.Chat.html"
  },
  {
      "label": "Apps > Contacts",
      "url": "Apps.Contacts.html"
  }
]