diff --git a/static/search-box.js b/static/search-box.js index 50b11c5..c661ede 100644 --- a/static/search-box.js +++ b/static/search-box.js @@ -19,6 +19,11 @@ function _codigoparallevar_enable_search_box(selector, options) { const resultsList = document.createElement('ul'); resultsBox.appendChild(resultsList); + const noResultsBox = document.createElement('div'); + noResultsBox.setAttribute('class', 'no-results-box hidden'); + noResultsBox.innerText = 'No results 🤷'; + resultsBox.appendChild(noResultsBox); + resultsBoxBackdrop.appendChild(resultsBox); document.body.appendChild(resultsBoxBackdrop); @@ -45,7 +50,7 @@ function _codigoparallevar_enable_search_box(selector, options) { }; }; - const DEBOUNCE_TIME = 500; // Milliseconds + const DEBOUNCE_TIME = 250; // Milliseconds const MIN_LENGTH = 3; const SEARCH_ENDPOINT = (window.location.host.startsWith('localhost') ? 'http://localhost:3001/api/search' @@ -92,6 +97,12 @@ function _codigoparallevar_enable_search_box(selector, options) { resultCard.appendChild(resultContents); resultsList.appendChild(resultCard); } + if (body.results.notes.length == 0) { + noResultsBox.classList.remove('hidden'); + } + else { + noResultsBox.classList.add('hidden'); + } }); }; element.removeAttribute('disabled'); diff --git a/static/style.css b/static/style.css index ba2d073..5e631e6 100644 --- a/static/style.css +++ b/static/style.css @@ -81,6 +81,14 @@ body nav input { margin: 0; } +.no-results-box { + padding: 1rem; +} + +.no-results-box.hidden { + display: none; +} + @font-face { font-family: "Atkinson Hyperlegible"; src: url('./fonts/atkinson-hyperlegible/eot/Atkinson-Hyperlegible-Regular-102.eot');