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.