Search jQuery

jQuery Forum

Using jQuery UI

yvsong

Autocomplete event timing

Solved

Need more info
Not a problem
Temporary fix
Analyzing
Working on it
Solved

in Using jQuery UI • 8 years ago

jQuery UI 1.8.9 and jQuery 1.5.0 on 64 bit Linux:

$('#s').autocomplete({source : localArray});
$('#s').change(function() {
var v = $('#s').val();
});

$('#s') is an input textfield. After typing in the textfield (for example 'a'), select an item (for example 'abc') from the autocomplete menu, the change function is executed and variable v becomes 'a'. It seems autocomplete triggers a change event for the textfield before changing its value. The correct behavior should be triggering the event after changing the textfield value.

Replies(4)

joern.zae..

Re: Autocomplete event timing

8 years ago

You're binding to the native change event, which autocomplete doesn't trigger. Autocomplete triggers an autocompletechange event. You should just bind to that using the option:

$("#s").autocomplete({
change: function() {
var v = $(this).val();
}
});

yvsong

Re: Re: Autocomplete event timing

8 years ago

150 ms after selecting an item from the autocomplete menu, I do get the new value from the native change function, so an event must be fired by someone. I need to keep the native change function to allow users to type directly and ignore the autocomplete menu. If I also bind the autocomplete change event, wouldn't I get 2 events and 2 actions from every selection?

scott.gon..

Re: Autocomplete event timing

8 years ago

The autocompletechange event will occur on every change, regardless of whether an item was chosen. You can detect if an item was chosen by checking ui.item in the autocompletechange event.

$( "#s" ).autocomplete({
source: localArray,
change: function( event, ui ) {
if ( ui.item ) {
alert( "selected an item" );
} else {
alert( "arbitrary text" );
}
}
});

You can also use .bind( "autocompletechange" ) instead of specifying the change callback in the options.

yvsong

Re: Autocomplete event timing

8 years ago

To submit the form immediately upon selection, and without selection, I do this now:

$('#s').autocomplete({
select: function(event, ui) {
submit(ui.item.value);
},
change: function() {
submit(this.value);
}
});

The remaining issue is the lack of action upon hitting the enter key when the user ignores the drop down menu completely. Thanks.

Top Reply

Response title

Attachments

jQuery Forum

Autocomplete event timing

Solved

Replies(4)

Re: Autocomplete event timing

Re: Re: Autocomplete event timing

Re: Autocomplete event timing

Re: Autocomplete event timing

Statistics

Tags

Actions