diff --git a/assets/js/search.js b/assets/js/search.js index 5add49844..e8955f379 100644 --- a/assets/js/search.js +++ b/assets/js/search.js @@ -65,11 +65,71 @@ document.addEventListener("keydown", function (event) { } }); -// Update search on each keypress input.onkeyup = function (event) { - executeQuery(this.value); + // queue an update after each keypress. the last one after some idle time wins + let isFirstRun = throttle(() => executeQuery(this.value)); + // on first run, show a spinner + if (isFirstRun) { + output.innerHTML = `
  • + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    • `; + } }; +function throttle(func, time = 750) { + let isFirstRun = throttle.timeout === undefined + if (!isFirstRun) { + clearTimeout(throttle.timeout) + } + throttle.timeout = setTimeout(() => { + func() + throttle.timeout = undefined + }, time) + return isFirstRun +} + function displaySearch() { if (!indexed) { buildIndex(); @@ -130,12 +190,12 @@ function buildIndex() { function executeQuery(term) { let results = fuse.search(term); - let resultsHTML = ""; + hasResults = results.length > 0; if (results.length > 0) { // prettier-ignore - resultsHTML = results.map(function (value, key) { - return `
  • + output.innerHTML = results.map(function (value) { + return `
  • ${value.item.title}
    @@ -147,15 +207,11 @@ function executeQuery(term) {
    • `; }).join(""); - hasResults = true; - } else { - resultsHTML = ""; - hasResults = false; - } - output.innerHTML = resultsHTML; - if (results.length > 0) { first = output.firstChild.firstElementChild; last = output.lastChild.firstElementChild; } + else { + output.innerHTML = "" + } }