facebook like ajax search - how to go through results using the keyboard

Question

Im trying to implement a facebook like search that will return results while the user is typing (autocomplete), here is the jquery code I am using :

$(document).ready(function(){
    $("#searchField").keyup(function() 
    {
        var searchbox = $(this).val();
            if(searchbox=='')
            {
            $("#searchDisplay").html('').hide();
            }
            else
            {
                $.ajax({
                url: "ajax/?do=search_users&q="+ searchbox+"",
                //data: dataString,
                cache: false,
                    success: function(html)
                    {
                        $("#searchDisplay").html(html).show();
                    }
                });
            }return false;    
    });
});

$("#searchField").focusout(function(){
    $("#searchDisplay").slideUp();
});

$("#searchField").focus(function(){
    if($("#searchDisplay").html() != ''){
        $("#searchDisplay").slideDown();
    }
});

The returning result is in div structure. What I dont know how to do is to allow users to go through the results using the [UP] and [DOWN] keys on the keyboard and choosing the result by pressing the [ENTER] button.

EXTRA INFO

here is the display_box :

<div id="searchDisplay">
                echo '<a href="'.$_config['http'].$username.'"><div class="display_box" align="left">';
                echo '<img src="'.$img.'"  style="width:25px; float:left; margin-right:6px" />';
                echo $name.'<br/>';
                echo '<span style="font-size:9px; color:#999999">'.$username.'</span></div></a>';
</div>

THE HTML MARKUP

    <a href="ahoora"><div class="display_box" align="left">
    <img src="http://domain.com/upload/thumbs/ahoora_1336145552.jpg" style="width:25px; float:left; margin-right:6px">
<strong>a</strong>hour<strong>a</strong><br>
<span style="font-size:9px; color:#999999"><strong>a</strong>hoor<strong>a</strong></span>
</div></a>

each result has the above html code, and they are all loaded into a <div> with the id=searchDisplay.

*note that the php echo part has a while loop, the above code is just the idea of how the html is like (the searchDisplay is not in the same page as the result, check the jquery code).

Answer 1

There is a jQuery plugin which allows to to bind action to keyboard shortcurs. I've used it to navigate a list of items using cursor keys:

https://github.com/jeresig/jquery.hotkeys

Defining a shortcut key with plugin is as simple as that:

$(document).bind('keydown', 'ctrl+a', fn);

Answer 2

jQuery UI autocomplete handles this functionality nicely, without any additional code:

http://jqueryui.com/demos/autocomplete/

See the demo at this url for a quick primer.