Strange behavior accessing a property in a javascript object

Question

I'm trying to access a value in my object:

<input type="text" name="address-search" 
       placeholder="43 Roxling Drive Boston, MA" 
       class="ui-autocomplete-input ui-corner-all" autocomplete="off">

select: function( event, ui ) {
    console.log(ui);
    $('input[name="address-search"]').val(ui.item.label);
}

Here's the result of the console.log call:

Here's the strange bit:

If I console.log(ui.item.label) I get: Boston, Massachusetts, United States.

If I call $('input[name="address-search"]').val(ui.item.label); I only get Boston. Any ideas why this is happening?

Answer 1

From jQuery UI autocomplete doc:

select

Triggered when an item is selected from the menu. The default action is to replace the text field's value with the value of the selected item. Canceling this event prevents the value from being updated. [...]

What happens here: you replace the value in the input wrapped by into 'autocomplete' widget - but then the widget replaces it by itself. ) Add return false; to your function to make it work.

As a sidenote, you don't have to look up the DOM for that element again:

this.value = ui.item.label;

... should do the trick. )