<style>
.listbox{
    width: 200px;
    border: 1px solid #777;
    padding: 0;
    margin: 0;
}
.item{
    background: #eee;
    border: 1px solid red;
    list-style: none;
    padding: 2px;
    margin: 0;
}
.item.active{
    background: red;
    color: white;
}
</style>
<ul class="listbox">
<li class="item">Lorem</li>
<li class="item">Ipsum</li>
<li class="item">Lorem</li>
<li class="item">Ipsum</li>
</ul>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
var $items = $('.item');
var active = 0;

document.body.focus();
$items.eq(0).addClass('active');

$(document).keydown(function(event){
if (event.keyCode == 40 || event.keyCode == 38) {
        $items.eq(active).removeClass('active');
        var step = {40: 1, 38: -1}[event.keyCode];
        // циркулирующий инкремент/декремент
        active = ($items.length + active + step) % $items.length;
        $items.eq(active).addClass('active');
        event.preventDefault();
}
});
</script>

$('#searchresults').first('span').attr('class', 'active');

$('#searchresults > span:first-child').addClass('active');