jQuery UI Autocomplete DownArrow UpArrow

Question

I am having some issues with jQuery Autocomplete and moving DownArrow and UpArrow ?

The problem seems to be that

<input id="autocomplete-input" value="">

focus: function (event, ui) {
       $('#autocomplete-input').val(ui.item.label);
 }

This works great for MOUSE focus - but when I use arrowUp and arrowDown - it selects the ui.item.id over and above the ui.item.label

How can I fix this so that either:

1. the input val isn't changed at all [i.e. it keeps the users inputted term]
2. it updates the input val with the focused val the user is on with keydown/keyup

thanks

Answer 1

Make sure to prevent the default behavior of the focus event:

focus: function (event, ui) {
    this.value = ui.item.label;
      // or $('#autocomplete-input').val(ui.item.label);

    // Prevent the default focus behavior.
    event.preventDefault();
      // or return false;
}