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:

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

thanks

rocambille · Accepted Answer · 2016-09-29 08:50:19Z

60

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

edited Sep 29, 2016 at 8:50

rocambille

16.2k12 gold badges54 silver badges71 bronze badges

answered Nov 8, 2011 at 4:09

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andy Over a year ago

aha! awesome thanks so much @andrew - i totally forgot to try that :)

Manjay_TBAG Over a year ago

This is working but one issue when key(up/down) is at selected item text box is showing value not label but after pressing enter its again showing value

Collectives™ on Stack Overflow

jQuery UI Autocomplete DownArrow UpArrow

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related