Developers

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.