diff --git a/assets/search.js b/assets/search.js
index cde8896..f520952 100644
--- a/assets/search.js
+++ b/assets/search.js
@@ -45,9 +45,10 @@ function debouncer(interval, callback) {
}).then(result => {
while (results.lastChild) results.removeChild(results.lastChild);
- result.hits.forEach(hit => {
+ result.hits.forEach((hit, index) => {
const item = resultPrototype.cloneNode(true);
item.querySelector('.link').href = hit.slug || ".";
+ item.querySelector('.link').setAttribute("data-focusindex", index + 1);
item.querySelector('.title').textContent = hit.title;
item.querySelector('.snippet').textContent = hit.snippet;
results.appendChild(item);
@@ -71,4 +72,26 @@ function debouncer(interval, callback) {
// We are now actually losing focus from the form:
form.classList.remove("focus");
});
+
+ function moveFocus(delta) {
+ const focusIndexText = document.activeElement.getAttribute("data-focusindex");
+ if (!focusIndexText) return;
+ const currentIndex = parseInt(focusIndexText, 10);
+ const nextIndex = currentIndex + delta;
+
+ const candidate = form.querySelector("[data-focusindex=\"" + nextIndex + "\"]");
+ if (candidate) candidate.focus();
+ }
+
+ form.addEventListener('keydown', function (ev) {
+ if (ev.key === 'ArrowUp') {
+ ev.preventDefault();
+ ev.stopPropagation();
+ moveFocus(-1);
+ } else if (ev.key === 'ArrowDown') {
+ ev.preventDefault();
+ ev.stopPropagation();
+ moveFocus(1);
+ }
+ });
})();
diff --git a/assets/style.css b/assets/style.css
index 1e59880..7a67984 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -361,11 +361,15 @@ article ul.search-results {
text-decoration: none;
padding: 8px;
}
-.live-results .search-result a:hover {
+.live-results .search-result a:hover, .live-results .search-result a:focus {
background: #0074D9;
color: white;
}
+.live-results .search-result .title {
+ font-weight: bold;
+}
+
.prototype {
display: none;
}
diff --git a/templates/layout.html b/templates/layout.html
index e688fee..18c0287 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -9,11 +9,11 @@
-
+
{{{body}}}