Select data using arrow keys,from ajax suggestion text box

Question

I am having a input text box, in which user enters some data and presses enter key. Then some suggestion are shown ,then the user should be able to select values from these suggestions using arrow keys. Then he selects a data from suggestions using enter key and this selected value should be shown in the input text field. I am able perform all this using mouse, but now i want to do this using arrow keys. This is how i implemented enter key event using jquery.

 $('#dishes').keydown(function (e){
    if(e.keyCode == 13){
       menusearch('dishes','<?=$user_id?>') ;
    }
}) 

I am looking something along these lines.

Answer 1

I had similar task as you need now:

$("#searchterm2").keyup(function(event) {
if ( event.keyCode != '13' && event.keyCode != '38' && event.keyCode != '40') { //user input some symbol
    if( helpbox_closed == 1 ){ //if autocomplete is still hidden
        $('div.saveSearchTmp > input:last').val($("#searchterm2").val()); // saving user's value
        $("#helpBox").show() //show autocomplete box
                     .load("searchAjax.php", {words: $("#searchterm2").val()},function(){
            checkAJAX(); //creating ajax request to get fields by user's value and setting helpbox_closed = 0
        });
    }
}

if( ( event.keyCode == '40' || event.keyCode == '38') && $("#helpBox").css('display') == 'none' )
    $("#searchterm2").keyup(); //if user push up or down and autocomplete box is hidden we show it
else if( event.keyCode == '40'){
    helpbox_closed = 0;
    //your code here to move current li/div/or what you have 
}else if( event.keyCode == '38'){
    helpbox_closed = 0;
    //your code here to move current li/div/or what you have 
}});

Sorry I don't see your html for autocomplete box so this is all what I can tell you with information you provide.