Question

Basically, im having a hard time getting the correct value from a jquery UI input with a autocomplete at times. Iv created a jsfiddle to demonstrate the behavior. Hard to explain the exact issue, but here’s the fiddle:

http://jsfiddle.net/B4mXH/14/

To reproduce, follow these steps exactly, while having the browser dev tools js console open:

1. focus on the text input
2. move the mouse away from the input
3. type c
4. press arrow down on the keyboard to select “abc”
5. hover over the option “cde”
6. click the button.

error: I wont get any value. undefined is logged to the console.
expected: whatever value is inside the input box. please =)

If it matters, im using chrome.

Answer 1

If you swap the change handler by a blur one it will work as intended:

$('#autocomplete').blur(function(event, ui) {
    value = $(this).val();
});

I’m not sure why, but I assume the UI programmatically fires change events which affect the outcome of your stored value variable.

Also, if you want to always get the current value of text input, you can query it when using it instead of storing it in a variable:

$('#button').click(function() {
    console.log("clicked with : " + $('#autocomplete').val());
});

There may be some restriction on your project for you to not be using that yet, but it’s the most bulletproof method if you can use it.