Autocomplete: Track input changes and fire change-event on blur, along with selected item, if available. Fix for #5490

Author: jzaefferer

tests/unit/autocomplete/autocomplete_events.js

@@ -12,7 +12,7 @@ module("autocomplete: events", {
 var data = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];
 
 test("all events", function() {
-	expect(11);
+	expect(12);
 	var ac = $("#autocomplete").autocomplete({
 		delay: 0,
 		source: data,
@@ -34,21 +34,38 @@ test("all events", function() {
 			same(event.type, "autocompleteselect");
 			same(ui.item, {label:"java", value:"java"});
 		},
-		change: function(event) {
+		change: function(event, ui) {
 			same(event.type, "autocompletechange");
+			same(ui.item, {label:"java", value:"java"});
 			same( $(".ui-menu:visible").length, 0 );
+			start();
 		}
 	});
 	stop();
-	ac.val("ja").keydown();
+	ac.focus().val("ja").keydown();
 	setTimeout(function() {
 		same( $(".ui-menu:visible").length, 1 );
 		ac.simulate("keydown", { keyCode: $.ui.keyCode.DOWN });
 		ac.simulate("keydown", { keyCode: $.ui.keyCode.ENTER });
-		start();
+		ac.blur();
 	}, 50);
 });
 
+test("change without selection", function() {
+	expect(2);
+	stop();
+	var ac = $("#autocomplete").autocomplete({
+		delay: 0,
+		source: data,
+		change: function(event, ui) {
+			same(event.type, "autocompletechange");
+			same(ui.item, null);
+			start();
+		}
+	});
+	ac.focus().val("ja").blur();
+});
+
 test("cancel search", function() {
 	expect(6);
 	var first = true;

ui/jquery.ui.autocomplete.js

@@ -83,6 +83,7 @@ $.widget( "ui.autocomplete", {
 				}
 			})
 			.bind( "focus.autocomplete", function() {
+				self.selectedItem = null;
 				self.previous = self.element.val();
 			})
 			.bind( "blur.autocomplete", function( event ) {
@@ -91,6 +92,7 @@ $.widget( "ui.autocomplete", {
 				// TODO try to implement this without a timeout, see clearTimeout in search()
 				self.closing = setTimeout(function() {
 					self.close( event );
+					self._change( event );
 				}, 150 );
 			});
 		this._initSource();
@@ -116,11 +118,13 @@ $.widget( "ui.autocomplete", {
 						self.element.val( item.value );
 					}
 					self.close( event );
-					self.previous = self.element.val();
 					// only trigger when focus was lost (click on menu)
+					var previous = self.previous;
 					if ( self.element[0] !== doc.activeElement ) {
 						self.element.focus();
+						self.previous = previous;
 					}
+					self.selectedItem = item;
 				},
 				blur: function( event, ui ) {
 					if ( self.menu.element.is(":visible") ) {
@@ -219,8 +223,11 @@ $.widget( "ui.autocomplete", {
 			this.menu.element.hide();
 			this.menu.deactivate();
 		}
+	},
+	
+	_change: function( event ) {
 		if ( this.previous !== this.element.val() ) {
-			this._trigger( "change", event );
+			this._trigger( "change", event, { item: this.selectedItem } );
 		}
 	},