Prevent changes when clicking jQuery UI autocomplete

Question

I have a text input element that uses jQuery UI autocomplete. The input has an onchange event associated with it to change some other form values ​​based on the user's choice. I also want to change these other form values ​​when the user selects an option from autocomplete.

The problem is that if the user searches for “beer” but only “bee” and then clicks on the beer option in autocomplete, the input exchange signal changes with the value “bee”, and then autocomplete select the response function (with the correct value for “beer” "). Since both of these handlers use the ajax call to find some things, I get into a race state.

My question is: is there a way that I can have onchange either not light up or interrupt when the user clicks on the autocomplete option. Note: this happens only when the button is pressed, selecting an option using only the keyboard does not lead to loss of input.

It is not an option for me to simply disable onchange completely when autocomplete is active, since it is plausible that the user will just continue typing and exit the input without selecting anything from autocomplete.

I made a small console console.log (), and the onchange event fires before all other events that I can think of, including input focus, autofill object focus, etc.

Answer 1

This problem is precisely the cause of the autocomplete change event. It looks like you should use this event to execute logic based on whether the user selected the item (thereby removing the onchange and autocompleteselect event handlers). For instance:

 $("#auto").autocomplete({ source: ['hi', 'bye', 'foo', 'bar'], change: function (event, ui) { if (ui.item) { /* user selected an item */ } else { /* user entered a new item */ } } }); 

Example: http://jsfiddle.net/bdDs7/