Autocomplete: Added appendTo option. Fixes #5836 - Autocomplete: add appendTo option.

Author: scottgonzalez

tests/unit/autocomplete/autocomplete.html

@@ -36,8 +36,8 @@ <h2 id="qunit-userAgent"></h2>
 
 <div id="main" style="position: absolute; top: -10000px; left: -10000px;">
 
-	<div><input id="autocomplete" class="foo" /></div>
-
+	<div id="ac-wrap1" class="ac-wrap"></div>
+	<div id="ac-wrap2" class="ac-wrap"><input id="autocomplete" class="foo" /></div>
 </div>
 
 </body>

tests/unit/autocomplete/autocomplete_defaults.js

@@ -3,6 +3,7 @@
  */
 
 var autocomplete_defaults = {
+	appendTo: "body",
 	delay: 300,
 	disabled: false,
 	minLength: 1,

tests/unit/autocomplete/autocomplete_options.js

@@ -68,6 +68,36 @@ test("cache: false", function() {
 
 var data = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];
 
+test( "appendTo", function() {
+	var ac = $( "#autocomplete" ).autocomplete();
+	same( ac.autocomplete( "widget" ).parent()[0], document.body, "defaults to body" );
+	ac.autocomplete( "destroy" );
+
+	ac.autocomplete({
+		appendTo: "#ac-wrap2"
+	});
+	same( ac.autocomplete( "widget" ).parent()[0], $( "#ac-wrap2" )[0], "id" );
+	ac.autocomplete( "destroy" );
+
+	ac.autocomplete({
+		appendTo: ".ac-wrap"
+	});
+	same( ac.autocomplete( "widget" ).parent()[0], $( "#ac-wrap1" )[0], "class" );
+	same( $( "#ac-wrap2 .ui-autocomplete").length, 0, "class - only appends to one element")
+	ac.autocomplete( "destroy" );
+
+	ac.autocomplete({
+		appendTo: null
+	});
+	same( ac.autocomplete( "widget" ).parent()[0], document.body, "null" );
+	ac.autocomplete( "destroy" );
+	
+	ac.autocomplete().autocomplete( "option", "appendTo", "#ac-wrap1" );
+	same( ac.autocomplete( "widget" ).parent()[0], $( "#ac-wrap1" )[0], "modified after init" );
+	ac.autocomplete( "destroy" );
+});
+
+
 test("delay", function() {
 	var ac = $("#autocomplete").autocomplete({
 		source: data,

ui/jquery.ui.autocomplete.js

@@ -16,6 +16,7 @@
 
 $.widget( "ui.autocomplete", {
 	options: {
+		appendTo: "body",
 		delay: 300,
 		minLength: 1,
 		position: {
@@ -104,7 +105,7 @@ $.widget( "ui.autocomplete", {
 		};
 		this.menu = $( "<ul></ul>" )
 			.addClass( "ui-autocomplete" )
-			.appendTo( "body", doc )
+			.appendTo( $( this.options.appendTo || "body", doc )[0] )
 			// prevent the close-on-blur in case of a "slow" click on the menu (long mousedown)
 			.mousedown(function() {
 				// use another timeout to make sure the blur-event-handler on the input was already triggered
@@ -166,11 +167,14 @@ $.widget( "ui.autocomplete", {
 		$.Widget.prototype.destroy.call( this );
 	},
 
-	_setOption: function( key ) {
+	_setOption: function( key, value ) {
 		$.Widget.prototype._setOption.apply( this, arguments );
 		if ( key === "source" ) {
 			this._initSource();
 		}
+		if ( key === "appendTo" ) {
+			this.menu.element.appendTo( $( value || "body", this.element.ownerDocument )[0] )
+		}
 	},
 
 	_initSource: function() {