Search: Result navigation with up/down

Author: Phaiax

src/theme/book.css

@@ -220,6 +220,8 @@ ul#searchresults {
 }
 ul#searchresults li {
   margin: 10px 0px;
+  padding: 2px;
+  border-radius: 2px;
 }
 ul#searchresults .breadcrumbs {
   float: right;
@@ -445,6 +447,9 @@ ul#searchresults span.teaser em {
 .light .searchresults-outer {
   border-bottom-color: #888;
 }
+.light ul#searchresults li.focus {
+  background-color: #e4f2fe;
+}
 .light .breadcrumbs {
   color: #CCC;
 }
@@ -583,6 +588,9 @@ ul#searchresults span.teaser em {
 .coal .searchresults-outer {
   border-bottom-color: #98a3ad;
 }
+.coal ul#searchresults li.focus {
+  background-color: #2b2b2f;
+}
 .coal .breadcrumbs {
   color: #686868;
 }
@@ -721,6 +729,9 @@ ul#searchresults span.teaser em {
 .navy .searchresults-outer {
   border-bottom-color: #5c5c68;
 }
+.navy ul#searchresults li.focus {
+  background-color: #242430;
+}
 .navy .breadcrumbs {
   color: #5c5c68;
 }
@@ -859,6 +870,9 @@ ul#searchresults span.teaser em {
 .rust .searchresults-outer {
   border-bottom-color: #888;
 }
+.rust ul#searchresults li.focus {
+  background-color: #dec2a2;
+}
 .rust .breadcrumbs {
   color: #757575;
 }
@@ -1001,6 +1015,9 @@ ul#searchresults span.teaser em {
 .ayu .searchresults-outer {
   border-bottom-color: #888;
 }
+.ayu ul#searchresults li.focus {
+  background-color: #252932;
+}
 .ayu .breadcrumbs {
   color: #5f5f5f;
 }

src/theme/book.js

@@ -32,6 +32,9 @@ $( document ).ready(function() {
 
         SEARCH_HOTKEY_KEYCODE: 83,
         ESCAPE_KEYCODE: 27,
+        DOWN_KEYCODE: 40,
+        UP_KEYCODE: 38,
+        SELECT_KEYCODE: 13,
 
         formatSearchMetric : function(count, searchterm) {
             if (count == 1) {
@@ -371,6 +374,7 @@ $( document ).ready(function() {
         ,
         globalKeyHandler : function (e) {
             if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) { return; }
+
             if (e.keyCode == this.ESCAPE_KEYCODE) {
                 e.preventDefault();
                 this.searchbar.removeClass("active");
@@ -386,6 +390,38 @@ $( document ).ready(function() {
                 e.preventDefault();
                 this.searchbar_outer.slideDown()
                 this.searchbar.focus();
+                return;
+            }
+            if (this.hasFocus() && e.keyCode == this.DOWN_KEYCODE) {
+                e.preventDefault();
+                this.unfocusSearchbar();
+                this.searchresults.children('li').first().addClass("focus");
+                return;
+            }
+            if (!this.hasFocus() && (e.keyCode == this.DOWN_KEYCODE
+                                     || e.keyCode == this.UP_KEYCODE
+                                     || e.keyCode == this.SELECT_KEYCODE)) {
+                // not `:focus` because browser does annoying scrolling
+                var current_focus = search.searchresults.find("li.focus");
+                if (current_focus.length == 0) return;
+                e.preventDefault();
+                if (e.keyCode == this.DOWN_KEYCODE) {
+                    var next = current_focus.next()
+                    if (next.length > 0) {
+                        current_focus.removeClass("focus");
+                        next.addClass("focus");
+                    }
+                } else if (e.keyCode == this.UP_KEYCODE) {
+                    current_focus.removeClass("focus");
+                    var prev = current_focus.prev();
+                    if (prev.length == 0) {
+                        this.searchbar.focus();
+                    } else {
+                        prev.addClass("focus");
+                    }
+                } else {
+                    window.location = current_focus.children('a').attr('href');
+                }
             }
         }
         ,