Autocomplete: When appendTo is a jQuery object or a DOM element, don't search against the document. Fixes #8858 - Autocomplete: Fails when appendTo is detached from the DOM.

Author: scottgonzalez

tests/unit/autocomplete/autocomplete_options.js

@@ -5,8 +5,9 @@ module( "autocomplete: options" );
 var data = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl" ];
 
 test( "appendTo", function() {
-	expect( 5 );
-	var element = $( "#autocomplete" ).autocomplete();
+	expect( 7 );
+	var detached = $( "<div>" ),
+		element = $( "#autocomplete" ).autocomplete();
 	equal( element.autocomplete( "widget" ).parent()[0], document.body, "defaults to body" );
 	element.autocomplete( "destroy" );
 
@@ -26,6 +27,18 @@ test( "appendTo", function() {
 	element.autocomplete().autocomplete( "option", "appendTo", "#ac-wrap1" );
 	equal( element.autocomplete( "widget" ).parent()[0], $( "#ac-wrap1" )[0], "modified after init" );
 	element.autocomplete( "destroy" );
+
+	element.autocomplete({
+		appendTo: detached
+	});
+	equal( element.autocomplete( "widget" ).parent()[0], detached[0], "detached jQuery object" );
+	element.autocomplete( "destroy" );
+
+	element.autocomplete({
+		appendTo: detached[0]
+	});
+	equal( element.autocomplete( "widget" ).parent()[0], detached[0], "detached DOM element" );
+	element.autocomplete( "destroy" );
 });
 
 function autoFocusTest( afValue, focusedLength ) {

ui/jquery.ui.autocomplete.js

@@ -181,7 +181,7 @@ $.widget( "ui.autocomplete", {
 		this._initSource();
 		this.menu = $( "<ul>" )
 			.addClass( "ui-autocomplete" )
-			.appendTo( this.document.find( this.options.appendTo || "body" )[ 0 ] )
+			.appendTo( this._appendTo() )
 			.menu({
 				// custom key handling for now
 				input: $(),
@@ -320,6 +320,14 @@ $.widget( "ui.autocomplete", {
 		}
 	},
 
+	_appendTo: function() {
+		var element = this.options.appendTo;
+		if ( element && (element.jquery || element.nodeType) ) {
+			return $( element );
+		}
+		return this.document.find( element || "body" ).eq( 0 );
+	},
+
 	_isMultiLine: function() {
 		// Textareas are always multi-line
 		if ( this.element.is( "textarea" ) ) {