Focus on ul list

Question

I developed a custom search for my website and I show the results in a ul list withing a div. My problem is that I want those results to be focusable so I can browse them with the arrow keys. Is this possible? And if it is how? Thanks!

RESULT

Answer 1

You can use the tabindex attribute to make elements focusable.

jsFiddle

<ul>
    <li tabindex="0">a</li>
    <li tabindex="0">a</li>
    <li tabindex="0">a</li>
    <li tabindex="0">a</li>
</ul>

Enabling arrow keys would be a matter of handling keydown and going to the next tab index.

Start of JavaScript

window.onkeydown = function(e) {
    e = e || event;
    switch (e.keyCode) {
        case 37: alert('left');
        case 38: alert('up'); 
            // http://stackoverflow.com/a/7208662/1156119
            break;
        case 39: alert('right'); 
        case 40: alert('down');
            // http://stackoverflow.com/a/7208662/1156119
            break;
    }
}