mirror of
https://github.com/Wonderfall/hugo-WonderMod.git
synced 2024-11-29 13:56:54 +01:00
77ff1e6b45
* refer https://fusejs.io/api/options.html for opts * keys used can be some, all or none from ["title", "permalink", "summary", "content"] in config.yml, add fuseOpts as shown below => params: fuseOpts: isCaseSensitive: false shouldSort: true location: 0 distance: 1000 threshold: 0.4 minMatchCharLength: 0 keys: ["title", "permalink", "summary", "content"]
61 lines
2.2 KiB
JavaScript
61 lines
2.2 KiB
JavaScript
var fuse; // holds our search engine
|
|
|
|
// load our search index, only executed onload
|
|
function loadSearch() {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.onreadystatechange = function () {
|
|
if (xhr.readyState === 4) {
|
|
if (xhr.status === 200) {
|
|
var data = JSON.parse(xhr.responseText);
|
|
if (data) {
|
|
// fuse.js options; check fuse.js website for details
|
|
var options = {
|
|
isCaseSensitive: false,
|
|
shouldSort: true,
|
|
location: 0,
|
|
distance: 100,
|
|
threshold: 0.4,
|
|
minMatchCharLength: 0,
|
|
keys: [
|
|
'title',
|
|
'permalink',
|
|
'summary',
|
|
'content'
|
|
]
|
|
};
|
|
{{ if . }}options = {{ jsonify . }}{{ end }} // load custom options from .Site.Params.fuseOpts
|
|
fuse = new Fuse(data, options); // build the index from the json file
|
|
}
|
|
} else {
|
|
console.log(xhr.responseText);
|
|
}
|
|
}
|
|
};
|
|
xhr.open('GET', "../index.json");
|
|
xhr.send();
|
|
}
|
|
|
|
// execute search as each character is typed
|
|
document.getElementById("searchInput").onkeyup = function (e) {
|
|
// run a search query (for "term") every time a letter is typed
|
|
// in the search box
|
|
const results = fuse.search(this.value); // the actual query being run using fuse.js
|
|
|
|
if (results.length !== 0) {
|
|
// build our html if result exists
|
|
let resultSet = ''; // our results bucket
|
|
|
|
for (let item in results) {
|
|
resultSet = resultSet + itemGen(results[item].item.title, results[item].item.permalink)
|
|
}
|
|
|
|
document.getElementById("searchResults").innerHTML = resultSet;
|
|
} else {
|
|
document.getElementById("searchResults").innerHTML = '';
|
|
}
|
|
}
|
|
|
|
function itemGen(name, link) {
|
|
return `<li class="post-entry"><header class="entry-header">${name} »</header><a href="${link}" aria-label="${name}"></a></li>`
|
|
}
|