https://www.zaltbommel.nl/framework/js/Search/components/search-bar.js

1// https://www.algolia.com/doc/ui-libraries/autocomplete/integrations/with-instantsearch#debounce-search-results
2const refineDebounce = (fn, time) => {
3    let timerId = undefined;
4
5    return function (...args) {
6        if (timerId) {
7            clearTimeout(timerId);
8        }
9
10        timerId = setTimeout(() => fn(...args), time);
11    }
12}
13
14// https://www.algolia.com/doc/api-reference/widgets/search-box/js#full-example
15// Create a render function
16const renderSearchBox = (renderOptions, isFirstRender) => {
17    const { query, refine, widgetParams } = renderOptions;
18
19    if (isFirstRender) {
20        const input = widgetParams.container.querySelector(widgetParams.inputQuery);
21        const debouncedRefine = refineDebounce(refine, widgetParams.searchAsYouTypeDelay);
22
23        input.addEventListener("input", async (event) => {
24            if (widgetParams.searchAsYouTypeDelay === 0) {
25                refine(event.target.value);
26            } else {
27                debouncedRefine(event.target.value);
28            }
29        });
30
31        // This is done to set the query the first time as this is a custom searchbar
32        widgetParams.container.querySelector(widgetParams.inputQuery).value = query;
33    }
34};
35
36// Create the custom widget
37export const customSearchBar = window.instantsearch ? instantsearch.connectors.connectSearchBox(
38    renderSearchBox,
39) : () => null;