Autocomplete: Added support for contenteditable elements. Fixes #6914 - Autocomplete: Support contenteditable.

Author: scottgonzalez

tests/unit/autocomplete/autocomplete.html

@@ -40,6 +40,7 @@ <h2 id="qunit-userAgent"></h2>
 
 	<div id="ac-wrap1" class="ac-wrap"></div>
 	<div id="ac-wrap2" class="ac-wrap"><input id="autocomplete" class="foo" /></div>
+	<div id="autocomplete-contenteditable" contenteditable="" tabindex=0></div>
 </div>
 
 </body>

tests/unit/autocomplete/autocomplete_events.js

@@ -51,6 +51,46 @@ test("all events", function() {
 	}, 50);
 });
 
+test("all events - contenteditable", function() {
+	expect(12);
+	var ac = $("#autocomplete-contenteditable").autocomplete({
+		delay: 0,
+		source: data,
+		search: function(event) {
+			same(event.type, "autocompletesearch");
+		},
+		open: function(event) {
+			same(event.type, "autocompleteopen");
+		},
+		focus: function(event, ui) {
+			same(event.type, "autocompletefocus");
+			same(ui.item, {label:"java", value:"java"});
+		},
+		close: function(event) {
+			same(event.type, "autocompleteclose");
+			same( $(".ui-menu:visible").length, 0 );
+		},
+		select: function(event, ui) {
+			same(event.type, "autocompleteselect");
+			same(ui.item, {label:"java", value:"java"});
+		},
+		change: function(event, ui) {
+			same(event.type, "autocompletechange");
+			same(ui.item, {label:"java", value:"java"});
+			same( $(".ui-menu:visible").length, 0 );
+			start();
+		}
+	});
+	stop();
+	ac.focus().text("ja").keydown();
+	setTimeout(function() {
+		same( $(".ui-menu:visible").length, 1 );
+		ac.simulate("keydown", { keyCode: $.ui.keyCode.DOWN });
+		ac.simulate("keydown", { keyCode: $.ui.keyCode.ENTER });
+		$.browser.msie ? ac.simulate("blur") : ac.blur();
+	}, 50);
+});
+
 test("change without selection", function() {
 	expect(2);
 	stop();

ui/jquery.ui.autocomplete.js

@@ -39,6 +39,8 @@ $.widget( "ui.autocomplete", {
 			doc = this.element[ 0 ].ownerDocument,
 			suppressKeyPress;
 
+		this.valueMethod = this.element[ this.element.is( "input" ) ? "val" : "text" ];
+
 		this.element
 			.addClass( "ui-autocomplete-input" )
 			.attr( "autocomplete", "off" )
@@ -89,15 +91,15 @@ $.widget( "ui.autocomplete", {
 					self.menu.select( event );
 					break;
 				case keyCode.ESCAPE:
-					self.element.val( self.term );
+					self._value( self.term );
 					self.close( event );
 					break;
 				default:
 					// keypress is triggered before the input value is changed
 					clearTimeout( self.searching );
 					self.searching = setTimeout(function() {
 						// only search if the value has changed
-						if ( self.term != self.element.val() ) {
+						if ( self.term != self._value() ) {
 							self.selectedItem = null;
 							self.search( null, event );
 						}
@@ -117,7 +119,7 @@ $.widget( "ui.autocomplete", {
 				}
 
 				self.selectedItem = null;
-				self.previous = self.element.val();
+				self.previous = self._value();
 			})
 			.bind( "blur.autocomplete", function( event ) {
 				if ( self.options.disabled ) {
@@ -170,7 +172,7 @@ $.widget( "ui.autocomplete", {
 					if ( false !== self._trigger( "focus", event, { item: item } ) ) {
 						// use value to match what will end up in the input, if it was a key event
 						if ( /^key/.test(event.originalEvent.type) ) {
-							self.element.val( item.value );
+							self._value( item.value );
 						}
 					}
 				},
@@ -192,11 +194,11 @@ $.widget( "ui.autocomplete", {
 					}
 
 					if ( false !== self._trigger( "select", event, { item: item } ) ) {
-						self.element.val( item.value );
+						self._value( item.value );
 					}
 					// reset the term after the select event
 					// this allows custom select handling to work properly
-					self.term = self.element.val();
+					self.term = self._value();
 
 					self.close( event );
 					self.selectedItem = item;
@@ -205,8 +207,8 @@ $.widget( "ui.autocomplete", {
 					// don't set the value of the text field if it's already correct
 					// this prevents moving the cursor unnecessarily
 					if ( self.menu.element.is(":visible") &&
-						( self.element.val() !== self.term ) ) {
-						self.element.val( self.term );
+						( self._value() !== self.term ) ) {
+						self._value( self.term );
 					}
 				}
 			})
@@ -279,10 +281,10 @@ $.widget( "ui.autocomplete", {
 	},
 
 	search: function( value, event ) {
-		value = value != null ? value : this.element.val();
+		value = value != null ? value : this._value();
 
 		// always save the actual value, not the one passed as an argument
-		this.term = this.element.val();
+		this.term = this._value();
 
 		if ( value.length < this.options.minLength ) {
 			return this.close( event );
@@ -327,7 +329,7 @@ $.widget( "ui.autocomplete", {
 	},
 
 	_change: function( event ) {
-		if ( this.previous !== this.element.val() ) {
+		if ( this.previous !== this._value() ) {
 			this._trigger( "change", event, { item: this.selectedItem } );
 		}
 	},
@@ -397,7 +399,7 @@ $.widget( "ui.autocomplete", {
 		}
 		if ( this.menu.first() && /^previous/.test(direction) ||
 				this.menu.last() && /^next/.test(direction) ) {
-			this.element.val( this.term );
+			this._value( this.term );
 			this.menu.deactivate();
 			return;
 		}
@@ -406,6 +408,10 @@ $.widget( "ui.autocomplete", {
 
 	widget: function() {
 		return this.menu.element;
+	},
+
+	_value: function( value ) {
+		return this.valueMethod.apply( this.element, arguments );
 	}
 });