If flexsearch returns no results, display message

This commit is contained in:
Michael Schnerring 2021-10-15 15:38:04 +02:00
parent 1710b80829
commit af6c51f6f2
2 changed files with 17 additions and 3 deletions

View File

@ -133,6 +133,15 @@ Source:
suggestions.innerHTML = ""; suggestions.innerHTML = "";
suggestions.classList.remove('d-none'); suggestions.classList.remove('d-none');
// inform user that no results were found
if (flatResults.size === 0) {
const noResultsMessage = document.createElement('div')
noResultsMessage.innerHTML = `No results for "<strong>${searchQuery}</strong>"`
noResultsMessage.classList.add("suggestion__no-results");
suggestions.appendChild(noResultsMessage);
return;
}
// construct a list of suggestions // construct a list of suggestions
for(const [href, doc] of flatResults) { for(const [href, doc] of flatResults) {
const entry = document.createElement('div'); const entry = document.createElement('div');

View File

@ -10,11 +10,15 @@
z-index: $zindex-dropdown; z-index: $zindex-dropdown;
} }
#suggestions a,
.suggestion__no-results {
padding: 0.75rem;
margin: 0 0.5rem;
}
#suggestions a { #suggestions a {
display: block; display: block;
text-decoration: none; text-decoration: none;
padding: 0.75rem;
margin: 0 0.5rem;
} }
#suggestions a:focus { #suggestions a:focus {
@ -48,7 +52,8 @@
color: $black; color: $black;
} }
.suggestion__description { .suggestion__description,
.suggestion__no-results {
color: $gray-700; color: $gray-700;
} }