Show message when no results are found on search.

Also, lower debounce time to 250ms.
This commit is contained in:
Sergio Martínez Portela 2022-10-26 22:42:24 +02:00
parent c8b3a99e7a
commit 25a65253dd
2 changed files with 20 additions and 1 deletions

View File

@ -19,6 +19,11 @@ function _codigoparallevar_enable_search_box(selector, options) {
const resultsList = document.createElement('ul'); const resultsList = document.createElement('ul');
resultsBox.appendChild(resultsList); 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); resultsBoxBackdrop.appendChild(resultsBox);
document.body.appendChild(resultsBoxBackdrop); 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 MIN_LENGTH = 3;
const SEARCH_ENDPOINT = (window.location.host.startsWith('localhost') const SEARCH_ENDPOINT = (window.location.host.startsWith('localhost')
? 'http://localhost:3001/api/search' ? 'http://localhost:3001/api/search'
@ -92,6 +97,12 @@ function _codigoparallevar_enable_search_box(selector, options) {
resultCard.appendChild(resultContents); resultCard.appendChild(resultContents);
resultsList.appendChild(resultCard); resultsList.appendChild(resultCard);
} }
if (body.results.notes.length == 0) {
noResultsBox.classList.remove('hidden');
}
else {
noResultsBox.classList.add('hidden');
}
}); });
}; };
element.removeAttribute('disabled'); element.removeAttribute('disabled');

View File

@ -81,6 +81,14 @@ body nav input {
margin: 0; margin: 0;
} }
.no-results-box {
padding: 1rem;
}
.no-results-box.hidden {
display: none;
}
@font-face { @font-face {
font-family: "Atkinson Hyperlegible"; font-family: "Atkinson Hyperlegible";
src: url('./fonts/atkinson-hyperlegible/eot/Atkinson-Hyperlegible-Regular-102.eot'); src: url('./fonts/atkinson-hyperlegible/eot/Atkinson-Hyperlegible-Regular-102.eot');