Autocomplete.js is not working with keyboard up and down arrow keys

Question

I am using the following jquery ui autocomplete function. This is working perfectly with mouse but by keyboard, I am not able to select any value. Have a look at the code.

$("#"+textBoxId).autocomplete("../common
   /autoSuggestValues.php?index="+index+"&
  randValue="+Math.random(), {
    selectFirst: false,
    width:textBoxWidth,
    minChars: 2,
    autoFill: false,
    scroll: true,
    scrollHeight: 120,
    formatItem: function (rowdata) {
        var details = rowdata[0].split('@#@');
        return details[0];
    }
});

$('#'+textBoxId).result(function (event, data, formatted) { 
    var det   =  data[0].split("@#@");
    if(det[0] != 'No Match Found') {
        $('#'+textBoxId).val($.trim(det[0])).css('border','');  
        $('#'+hiddenId).val(det[1]);
        processAutoSuggOptFunc(optionalFunction); //process the optional  
     function using the another built function "processAutoSuggOptFunc"
    } else {
        $('#'+textBoxId).val('');   
        $('#'+hiddenId).val('');    
    }
});

Answer 1

For me, providing the focus method made the solution: searchField.autocomplete({ ... focus: function (event, ui) { event.preventDefault(); jQuery(this).val(ui.item.suggestion); }, ... });

See also here: http://yuji.wordpress.com/2011/09/22/jquery-ui-autocomplete-focus-event-via-keyboard-clears-input-content/