Site search module

Include script and styles:


<link rel="stylesheet" href="{{ site.static_asset_host }}/libs/edicy-search/latest/edicy-search.css">

Add search form to template. Take into account that user may not have search enabled in site settings:

{% if site.search.enabled %}
  <form class="search-form">
    <input type="search"/>
  </form>
{% endif %}

Configure and initiate in javascript:

var searchForm = document.querySelector(".search-form");
if (searchForm) {
  var search = new VoogSearch(searchForm, {
    // Results are lazy-loaded on scroll.
    // This defines the number of results per query.
    per_page: 3,

    // Language code for restricting the search to page language
    lang: "{{ page.language_code }}",

    // If given an DOM element results are rendered inside that element
    // instead of modal (with scroll lazy load support)
    resultsContainer: null,

    // Defines if modal should close on sideclick
    sideclick: true,

    // Mobile checkpoint (adds class "voog-search-mobile-mode" if <= nr)
    mobileModeWidth: 480,

    // Updates results on every keypress
    updateOnKeypress: false,

    // If updateOnKeyPress is true defines the minimal number
    // of characters when search is made
    minQueryLength: 3,

    // Shows the arrow of default search modal
    showTick: true,

    // Positioning of the default modal relative to the input
    // Allowed values "below", "above", "auto"
    position: "auto",
  });
}

Functions

The returned object from initiation has functions for directly handling modal behaviour.

var search = new VoogSearch(document.querySelector('.search-form'), {});

search.hideModal(); // Hides default modal
search.showModal(); // Makes default modal visible
search.positionModal() // Re-positions the modal

Events

There are some events triggered on form element that cam be listened in javascript (when browser supports CustomEvents):

sitesearch:showmodal - default search modal is displayed (not with resultsContainer defined)
sitesearch:hidemodal - default search modal is hidden (not with resultsContainer defined)
sitesearch:loading - search has started and results are pending
sitesearch:results - search has recieved results. Results object can be seen from event.detail
sitesearch:positionchange - default modal position has been changed (window resized etc.)

Need to exclude something from the search results? Learn how to control how your content is indexed