ritherdon-archive/static/js/quick-search.js

/**
Quick Search
================================================================================
This file's main focus is to provide the functionality for the 'quick search'
bar feature, which is available across the site. The search features are
provided by Meilisearch. Use the links below for more information.

For more information on Meilisearch, use:

- https://docs.meilisearch.com/
- https://github.com/meilisearch/instant-meilisearch

Meilisearch provides an 'InstantSearch' add-on (plug-in?) which links the
Meilisearch instance you have running to this website (link above for more
information).
*/

// let server = "";
let apiKey = "";

if (location.hostname === "localhost"
    || location.hostname === "127.0.0.1") {
    apiKey= "meilisearch-beta-key";
} else {
    apiKey = "meilisearch-key";
}

const search = instantsearch({
    indexName: "nera",
    searchClient: instantMeiliSearch(
	server,
	apiKey,
	{
	    primaryKey: 'id',
	}
    )
});

search.addWidgets([
    instantsearch.widgets.searchBox({
        container: "#searchbox",
	autofocus: false,
	placeholder: "Quick Search...",
    }),
    instantsearch.widgets.configure({ hitsPerPage: 8 }),
    instantsearch.widgets.hits({
        container: "#hits",
        templates: {
            item: `
<a class="fe-search-hit" href="{{server}}/{{relative-path}}">
<img src="{{server}}/{{thumbnail-path}}"/>   
<span>{{#helpers.highlight}}{"attribute": "title"}{{/helpers.highlight}}</span>
</a>
          `
        }
    })
]);

search.start();

const searchBox =
      document.querySelector(".ais-SearchBox-input");

const searchResultsBox =
      document.getElementById('hits');

const searchResultsList =
      document.querySelector(".ais-Hits-list");

searchBox.addEventListener("keydown", showSearchResults);

document.onmousedown = () => {
    if (document.activeElement !== searchBox) {
	hideSearchResults();
    }
};

function showSearchResults() {
    document.getElementById('hits').style.display = 'block';
    document.onkeydown = (evt) => {
	if (evt.keyCode === 9) {
	    searchResultsBox.focus();
	}
	if (evt.keyCode === 27) {
	    searchBox.blur();
	    hideSearchResults();
	}
    };
    document.onkeyup = (evt) => {
	if (searchBox.value.length == 0) {
	    hideSearchResults();
	}
    };
}

function hideSearchResults() {
    document.getElementById('hits').style.display = 'none';
}