|
|
|
/**
|
|
|
|
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"
|
|
|
|
|| location.hostname === "beta.nera.com") {
|
|
|
|
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';
|
|
|
|
}
|