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); }; }