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

diff --git a/tests/unit/autocomplete/autocomplete.html b/tests/unit/autocomplete/autocomplete.html
index 7ca96eb68f5ce47475a4f9db05b7f6cd28f5884f..943708694b8c9b60b77173f4fb2e1567281cb20c 100644 (file)
--- a/tests/unit/autocomplete/autocomplete.html
+++ b/tests/unit/autocomplete/autocomplete.html
@@ -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>

diff --git a/tests/unit/autocomplete/autocomplete_defaults.js b/tests/unit/autocomplete/autocomplete_defaults.js
index 8dad15e8f5e8ace188c96de39e0f5a74493a3df0..fc92f3209f529552928bb449bb7a93d205548049 100644 (file)
--- a/tests/unit/autocomplete/autocomplete_defaults.js
+++ b/tests/unit/autocomplete/autocomplete_defaults.js
@@ -3,6 +3,7 @@
  */
 
 var autocomplete_defaults = {
+       appendTo: "body",
        delay: 300,
        disabled: false,
        minLength: 1,

diff --git a/tests/unit/autocomplete/autocomplete_options.js b/tests/unit/autocomplete/autocomplete_options.js
index c5aa7c9615158d8e2ce664ced527991ae8b84e11..ac4aeef3510af9e4c59289c122212ce821351e36 100644 (file)
--- a/tests/unit/autocomplete/autocomplete_options.js
+++ b/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,

diff --git a/ui/jquery.ui.autocomplete.js b/ui/jquery.ui.autocomplete.js
index 4b37a000daa6e5976c834e4738594aa78add8571..0849ba7ebb0eb918ae4157119916f745d3ce1663 100644 (file)
--- a/ui/jquery.ui.autocomplete.js
+++ b/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() {