jQueryUI autocomplete not working with dialog and zIndex

Try setting the appendTo option to "#copy_dialog":

$(/** autocomplete-selector **/)    .autocomplete("option", "appendTo", "#copy_dialog");

This option specifies which element the autocomplete menu is appended to. By appending the menu to the dialog, the menu should inherit the correct z-index.

appendTo: Which element the menu should be appended to. When the value is null, the parents of the input field will be checked for a class of "ui-front". If an element with the "ui-front" class is found, the menu will be appended to that element. Regardless of the value, if no element is found, the menu will be appended to the body.

This means that <div id="copy_dialog" class="ui-front"> will do the trick. No need to use the option appendTo, that did not work for me.

The 'appendTo' option does not always work.

Most egregiously, it will not display past the height of the dialog, but also, if you are using a 3rd party utility (e.g. DataTables editor) you do not always have control over when a dialog, an input, etc. are being created, when they are attached to the DOM, what IDs they have, etc.

This seems to always work:

$(selector).autocomplete({    open: function(event, ui){        var dialog = $(this).closest('.ui-dialog');        if(dialog.length > 0){            $('.ui-autocomplete.ui-front').zIndex(dialog.zIndex()+1);        }    }});