<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"
});
}
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