Public archive for the Return to Ritherdon project.
https://www.nicolaellisandritherdon.com
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
2.3 KiB
99 lines
2.3 KiB
2 years ago
|
/**
|
||
|
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';
|
||
|
}
|