new-codigoparallevar/static/search-box.js

function _codigoparallevar_enable_search_box(selector, options) {
    const element = document.querySelector(selector);
    if ('placeholder' in options) {
        element.setAttribute('placeholder', options.placeholder);
    }

    // Prepare backdrop
    const resultsBoxBackdrop = document.createElement('div');
    resultsBoxBackdrop.setAttribute('class', 'results-box-container hidden');
    const resultsBox = document.createElement('div');
    resultsBox.setAttribute('class', 'results-box');

    // Results box contents
    const innerSearchBox = document.createElement('input');
    innerSearchBox.setAttribute('type', 'text');
    innerSearchBox.setAttribute('placeholder', element.getAttribute('placeholder'));
    resultsBox.appendChild(innerSearchBox);

    const resultsList = document.createElement('ul');
    resultsBox.appendChild(resultsList);

    resultsBoxBackdrop.appendChild(resultsBox);
    document.body.appendChild(resultsBoxBackdrop);

    // Popup cancellation
    resultsBoxBackdrop.onclick = () => {
        resultsBoxBackdrop.classList.add('hidden');
    };
    resultsBox.onclick = (ev) => {
        ev.stopPropagation();
    };

    // Element triggers popup
    element.onfocus = () => {
        resultsBoxBackdrop.classList.remove('hidden');
        innerSearchBox.focus();
    };

    const DEBOUNCE_TIME = 500; // Milliseconds
    const MIN_LENGTH = 3;
    const SEARCH_ENDPOINT = 'http://localhost:3001/api/search';

    let debounceWaiter = null;
    let currentQuery = null;

    let lastVal = null;
    const doQuery = () => {
        const val = innerSearchBox.value.trim();
        if ((val.length < MIN_LENGTH) || (val === lastVal)) {
            return;
        }
        lastVal = val;

        const uri = SEARCH_ENDPOINT + '?q=' + encodeURIComponent(val);
        let query = fetch(uri);
        currentQuery = query;
        query
            .then(res => res.json())
            .then((body) => {
                if (query !== currentQuery) {
                    console.log("Query out-raced 🤷");
                    return;
                }

                console.log('=>', body);
            });
    };
    element.removeAttribute('disabled');

    innerSearchBox.onkeyup = (ev) => {
        if (debounceWaiter !== null) {
            clearTimeout(debounceWaiter);
        }
        debounceWaiter = setTimeout(doQuery, DEBOUNCE_TIME);
    };
}