feat: add the proposed search timeout

main
Henrik 2023-09-10 00:39:39 +02:00
parent 8ea6a55a82
commit b2119d4db6
1 changed files with 13 additions and 2 deletions

View File

@ -137,10 +137,21 @@ function handleSearch(dataCenter, err, ev, sr, maxResults, autocomplete) {
sr.setAttribute("state", "done"); sr.setAttribute("state", "done");
} }
// https://www.joshwcomeau.com/snippets/javascript/debounce/
const debounce = (callback, wait) => {
let timeoutId = null;
return (...args) => {
window.clearTimeout(timeoutId);
timeoutId = window.setTimeout(() => {
callback.apply(null, args);
}, wait);
};
}
DeclarationDataCenter.init() DeclarationDataCenter.init()
.then((dataCenter) => { .then((dataCenter) => {
// Search autocompletion. // Search autocompletion.
SEARCH_INPUT.addEventListener("input", ev => handleSearch(dataCenter, null, ev, ac_results, AC_MAX_RESULTS, true)); SEARCH_INPUT.addEventListener("input", debounce(ev => handleSearch(dataCenter, null, ev, ac_results, AC_MAX_RESULTS, true), 500));
if(SEARCH_PAGE_INPUT) { if(SEARCH_PAGE_INPUT) {
SEARCH_PAGE_INPUT.addEventListener("input", ev => handleSearch(dataCenter, null, ev, SEARCH_RESULTS, SEARCH_PAGE_MAX_RESULTS, false)) SEARCH_PAGE_INPUT.addEventListener("input", ev => handleSearch(dataCenter, null, ev, SEARCH_RESULTS, SEARCH_PAGE_MAX_RESULTS, false))
document.querySelectorAll(".kind_checkbox").forEach((checkbox) => document.querySelectorAll(".kind_checkbox").forEach((checkbox) =>
@ -151,7 +162,7 @@ DeclarationDataCenter.init()
SEARCH_INPUT.dispatchEvent(new Event("input")) SEARCH_INPUT.dispatchEvent(new Event("input"))
}) })
.catch(e => { .catch(e => {
SEARCH_INPUT.addEventListener("input", ev => handleSearch(null, e, ev, ac_results, AC_MAX_RESULTS,true )); SEARCH_INPUT.addEventListener("input", debounce(ev => handleSearch(null, e, ev, ac_results, AC_MAX_RESULTS, true), 500));
if(SEARCH_PAGE_INPUT) { if(SEARCH_PAGE_INPUT) {
SEARCH_PAGE_INPUT.addEventListener("input", ev => handleSearch(null, e, ev, SEARCH_RESULTS, SEARCH_PAGE_MAX_RESULTS, false)); SEARCH_PAGE_INPUT.addEventListener("input", ev => handleSearch(null, e, ev, SEARCH_RESULTS, SEARCH_PAGE_MAX_RESULTS, false));
} }