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'); resultsBoxBackdrop.appendChild(resultsBox); document.body.appendChild(resultsBoxBackdrop); 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 = element.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'); element.onkeyup = (ev) => { if (debounceWaiter !== null) { clearTimeout(debounceWaiter); } debounceWaiter = setTimeout(doQuery, DEBOUNCE_TIME); }; }