Added prototypical arrow up/down result selection

material/base.html

@@ -38,7 +38,7 @@
       <script src="{{ base_url }}/assets/javascripts/modernizr-56ade86843.js"></script>
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-015c443a94.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-d848f886dc.css">
       {% if config.extra.palette %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-66fa0d9bba.palette.css">
       {% endif %}
@@ -151,7 +151,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ base_url }}/assets/javascripts/application-134345668e.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/application-269373cb27.js"></script>
       <script>app.initialize({url:{base:"{{ base_url }}"}})</script>
       {% for path in extra_javascript %}
         <script src="{{ path }}"></script>

src/assets/javascripts/application.js

@@ -220,20 +220,58 @@ function initialize(config) { // eslint-disable-line func-style
       }
     }))
 
-  /* Listener: disable search when ESC key is pressed */
+  /* Listener: keyboard handlers */
   new Material.Event.Listener(window, "keyup", ev => {
-    const code = ev.keyCode || ev.which
+    switch (ev.key) {
-    if (code === 27) {
+
-      const toggle = document.querySelector("[data-md-toggle=search]")
+      /* Escape: disable search */
-      if (!(toggle instanceof HTMLInputElement))
+      case "Escape": {
-        throw new ReferenceError
+        const toggle = document.querySelector("[data-md-toggle=search]")
-      if (toggle.checked) {
+        if (!(toggle instanceof HTMLInputElement))
-        toggle.checked = false
-        toggle.dispatchEvent(new CustomEvent("change"))
-        const query = document.querySelector("[data-md-component=query]")
-        if (!(query instanceof HTMLInputElement))
           throw new ReferenceError
-        query.focus()
+        if (toggle.checked) {
+          toggle.checked = false
+          toggle.dispatchEvent(new CustomEvent("change"))
+          const query = document.querySelector("[data-md-component=query]")
+          if (!(query instanceof HTMLInputElement))
+            throw new ReferenceError
+          query.blur()
+        }
+        break
+      }
+
+      /* Up arrow: select previous search result */
+      case "ArrowUp": {
+        const active = document.querySelector(
+          "[data-md-component=search] [href][data-md-state=active]")
+        const links = Array.prototype.slice.call(
+          document.querySelectorAll("[data-md-component=search] [href]"))
+        let index = active
+          ? (links.indexOf(active) - 1) % links.length
+          : 0
+        if (index === -1)
+          index += links.length
+        if (active)
+          active.dataset.mdState = ""
+        links[index].dataset.mdState = "active"
+        links[index].focus()
+        break
+      }
+
+      /* Down arrow: select next search result */
+      case "ArrowDown": {
+        const active = document.querySelector(
+          "[data-md-component=search] [href][data-md-state=active]")            // TODO: remove active on mouseover (debounce!)
+        const links = Array.prototype.slice.call(
+          document.querySelectorAll("[data-md-component=search] [href]"))
+        const index = active
+          ? (links.indexOf(active) + 1) % links.length
+          : 0
+        if (active)
+          active.dataset.mdState = ""
+        links[index].dataset.mdState = "active"
+        links[index].focus()
+        break
       }
     }
   }).listen()

src/assets/stylesheets/layout/_search.scss

@@ -422,9 +422,11 @@ $md-toggle__search--checked:
   &__link {
     display: block;
     transition: background 0.25s;
+    outline: 0;
     overflow: hidden;
 
-    // Hovered link
+    // Active or hovered link
+    &[data-md-state="active"],
     &:hover {
       background-color: transparentize($md-color-accent, 0.9);