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);
}
});