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.4 KiB
99 lines
2.4 KiB
/** |
|
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'; |
|
}
|
|
|