Change Event not firing after autocomplete select
On autocomplete selection of a list item, the change event is supposed to fire. However, it does not until it loses focus (e.g., click mouse elsewhere).
HTML
<label>Tag friends: </label>
<form>
<div id="friends" class="ui-helper-clearfix">
<input type="text" name="to" id="to" value="" />
</div>
</form>
JavaScript
$("#to").autocomplete({
source: function (request, response) {
var friendsArray = [];
friendsArray = [{
"id": 1,
"name": "hulk",
"value": "hulk"
}, {
"id": 2,
"name": "ironman",
"value": "ironman"
}, {
"id": 3,
"name": "Foobar",
"value": "Foobar"
}];
response(friendsArray);
return;
},
select: function (e, ui) {
alert("selected!");
},
change: function (e, ui) {
alert("changed!");
}
});