diff --git a/assets/js/index.js b/assets/js/index.js
index 7bfa6c56c..b99ab905b 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -117,47 +117,53 @@ Source:
;
search.addEventListener('input', show_results, true);
- suggestions.addEventListener('click', accept_suggestion, true);
function show_results(){
const maxResult = 5;
+ var searchQuery = this.value;
+ var results = index.search(searchQuery, {limit: maxResult, enrich: true});
- var value = this.value;
- var results = index.search(value, {limit: maxResult, enrich: true});
+ // flatten results since index.search() returns results for each indexed field
+ const flatResults = new Map(); // keyed by href to dedupe results
+ for (const result of results.flatMap(r => r.result)) {
+ if (flatResults.has(result.doc.href)) continue;
+ flatResults.set(result.doc.href, result.doc);
+ }
- suggestions.classList.remove('d-none');
suggestions.innerHTML = "";
+ suggestions.classList.remove('d-none');
- //flatSearch now returns results for each index field. create a single list
- const flatResults = {}; //keyed by href to dedupe results
- for (const result of results.flatMap(r => r.result)) {
- flatResults[result.doc.href] = result.doc;
+ // inform user that no results were found
+ if (flatResults.size === 0 && searchQuery) {
+ const noResultsMessage = document.createElement('div')
+ noResultsMessage.innerHTML = `No results for "${searchQuery}"`
+ noResultsMessage.classList.add("suggestion__no-results");
+ suggestions.appendChild(noResultsMessage);
+ return;
}
- //construct a list of suggestions list
- for(const href in flatResults) {
- const doc = flatResults[href];
-
+ // construct a list of suggestions
+ for(const [href, doc] of flatResults) {
const entry = document.createElement('div');
- entry.innerHTML = '';
-
- entry.querySelector('a').href = href;
- entry.querySelector('span:first-child').textContent = doc.title;
- entry.querySelector('span:nth-child(2)').textContent = doc.description;
-
suggestions.appendChild(entry);
- if(suggestions.childElementCount == maxResult) break;
- }
- }
- function accept_suggestion(){
+ const a = document.createElement('a');
+ a.href = href;
+ entry.appendChild(a);
- while(suggestions.lastChild){
+ const title = document.createElement('span');
+ title.textContent = doc.title;
+ title.classList.add("suggestion__title");
+ a.appendChild(title);
- suggestions.removeChild(suggestions.lastChild);
- }
+ const description = document.createElement('span');
+ description.textContent = doc.description;
+ description.classList.add("suggestion__description");
+ a.appendChild(description);
- return false;
- }
+ suggestions.appendChild(entry);
+ if(suggestions.childElementCount == maxResult) break;
+ }
+ }
}());
diff --git a/assets/scss/components/_search.scss b/assets/scss/components/_search.scss
index 6beebf2d6..45ec2afff 100644
--- a/assets/scss/components/_search.scss
+++ b/assets/scss/components/_search.scss
@@ -10,11 +10,15 @@
z-index: $zindex-dropdown;
}
+#suggestions a,
+.suggestion__no-results {
+ padding: 0.75rem;
+ margin: 0 0.5rem;
+}
+
#suggestions a {
display: block;
text-decoration: none;
- padding: 0.75rem;
- margin: 0 0.5rem;
}
#suggestions a:focus {
@@ -43,12 +47,13 @@
font-size: $font-size-base;
}
-#suggestions span:first-child {
+.suggestion__title {
font-weight: $headings-font-weight;
color: $black;
}
-#suggestions span:nth-child(2) {
+.suggestion__description,
+.suggestion__no-results {
color: $gray-700;
}
@@ -61,7 +66,7 @@
display: flex;
}
- #suggestions span:first-child {
+ .suggestion__title {
width: 9rem;
padding-right: 1rem;
border-right: 1px solid $gray-200;
@@ -69,7 +74,7 @@
text-align: right;
}
- #suggestions span:nth-child(2) {
+ .suggestion__description {
width: 19rem;
padding-left: 1rem;
}