Proof of concept for keyboard nav of search results

key-nav.html

<style>
a {
    display: block;
}
:focus {
    background-color: red;
    outline: 0;
}
</style>
<input type="text" id="input" tabindex="0">
<div>
    <a href="#1" tabindex="0">
        <p><strong>Title</strong></p>
        <p>Description</p>
    </a>
    <a href="#2" tabindex="0">
        <p><strong>Title</strong></p>
        <p>Description</p>
    </a>
    <a href="#3" tabindex="0">
        <p><strong>Title</strong></p>
        <p>Description</p>
    </a>
    <a href="#4" tabindex="0">
        <p><strong>Title</strong></p>
        <p>Description</p>
    </a>
</div>
<script>
/* bling.js */
window.$ = document.querySelectorAll.bind(document);

Node.prototype.on = window.on = function (name, fn) {
  this.addEventListener(name, fn);
}

NodeList.prototype.__proto__ = Array.prototype;

NodeList.prototype.on = NodeList.prototype.addEventListener = function (name, fn) {
  this.forEach(function (elem, i) {
    elem.on(name, fn);
  });
}

$('input').on('keydown', function(event){
    if (event.keyCode == 40) {
        $('div')[0].firstElementChild.focus();
    }
});

$('a').on('keydown', function(event){
    switch (event.keyCode) {
        case 38:
            var prev = event.target.previousElementSibling;
            prev ? prev.focus() : null;
            break;
        case 40:
            var next = event.target.nextElementSibling;
            next ? next.focus() : null;
            break;
    }
});
</script>