jquery UI autocomplete inside a modal ui dialog - suggestions not showing?

Question

I came across this answer when searching for this same issue, however none of the solutions were exactly what I wanted.

Using appendTo worked, sorta... The autocomplete items showed up where they were supposed to, however it completely threw my dialog window into a garbled mess of improperly repositioned div elements.

So in my own css file, I created the following:

ul.ui-autocomplete {
    z-index: 1100;
}

I'm sure 1100 is a little overkill, but I just wanted to play it safe. It works well and conforms with the K.I.S.S. method.

I'm using jQuery 1.9.2 with jQueryUI 1.10.2.

When using jQuery UI 1.10, you should not mess around with z-indexes (http://jqueryui.com/upgrade-guide/1.10/#removed-stack-option). The appendTo option works, but will limit the display to the height of the dialog.

To fix it: make sure the autocomplete element is in the correct DOM order with: autocomplete.insertAfter(dialog.parent())

Example

 var autoComplete,
     dlg = $("#copy_dialog"),
     input = $(".title", dlg);

 // initialize autocomplete
 input.autocomplete({
     ...
 });

 // get reference to autocomplete element
 autoComplete = input.autocomplete("widget");

 // init the dialog containing the input field
 dlg.dialog({
      ...
 });

 // move the autocomplete element after the dialog in the DOM
 autoComplete.insertAfter(dlg.parent());

Update for z-index problem after dialog click

The z-index of the autocomplete seems to change after a click on the dialog (as reported by MatteoC). The workaround below seems to fix this:

See fiddle: https://jsfiddle.net/sv9L7cnr/

// initialize autocomplete
input.autocomplete({
    source: ...,
    open: function () {
        autoComplete.zIndex(dlg.zIndex()+1);
    }
});

I solved it in bootbox like this:

$( "#company" ).autocomplete({       
    source : availableTags ,
    appendTo: "#exportOrder"
});

You only have to append the result list to your form.

for one or multiples autocompletes in the same dialogbox:

// init the dialog containing the input field
 $("#dialog").dialog({
      ...
 });

// initialize autocomplete
 $('.autocomplete').autocomplete({        
      source: availableTags,
      minLength: 2
 }).each(function() {
      $(this).autocomplete("widget").insertAfter($("#dialog").parent());
 });

In your autocomplete implementation, add appendTo: "#search_modal", where search_modal is ID of your modal.

    $("#company").autocomplete({        
    source : availableTags ,
    appendTo : $('#divName')
    minLength: 2
});

Note: $('#divName') divName will be the name of modal body.

EXAMPLE:

<form id="exportOrder">
        <div class="input-group">
            <input type="text" id="accountReferenceSearch" placeholder="Type Account Reference to search..." class="form-control" style="width:500px">
        </div>
    </div>
</form>

self.AttachAutoComplete = function () {
                    $('#accountReferenceSearch').focus(function () {
                        $('#accountReferenceSearch').autocomplete({
                            source: function (request, response) {},
                            minLength: 2,
                            delay: 300,
                            appendTo: $("#exportOrder")
                        });
                    });
                }