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;
}