jquery / jquery-ui

@@ -36,8 +36,8 @@

 <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>

@@ -3,6 +3,7 @@

  */

 var autocomplete_defaults = {

+  appendTo: "body",

   delay: 300,

   disabled: false,

   minLength: 1,

@@ -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,

@@ -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() {