jQueryUI autocomplete not working with dialog and

Question

I ran into an interesting issue with jQueryUI autocomplete in a dialog box.

My dialog HTML looks like this:

<div id="copy_dialog">
    <table>
        <tbody>
            <tr>
                <th>Title:</th>
                <td><input type="text" class="title" name="title"></td>
            </tr>
            <tr>
                <th>Number:</th>
                <td><input type="text" name="number"></td>
            </tr>
        </tbody>
    </table>
</div>

When I run the jQueryUI autocomplete on the above HTML, it works perfect.

When I open it up using dialog

$('#copy').click(function()
{
    $('#copy_dialog').dialog({
        autoOpen: true,
        width: 500,
        modal: false,
        zIndex: 10000000,
        title: 'Duplicate',
        buttons: {
            'Cancel': function()
            {
                $(this).dialog('close');
            },
            'Save': function()
            {
                $(this).dialog('close');
            }
        }
    });

    return false;
});

Then in FireBug, I can see autocomplete is still working. It's requesting and receiving results, but I no longer see a list of options below the input field.

My thought is that this has something to do with the zIndex on the dialog box being much greater than what the autocomplete menu gives, but I don't know for sure. I'm still researching exact details of what's happening, but I'm hoping someone here will have some idea for me.

Edit I tried removing the zIndex from the dialog and my autocomplete starts showing up. Unfortunately, I need that zIndex value to get over the dreadfully high zIndex of the menubar, which I can't change (don't have access to that area of the code). So if there's a way to add a zIndex to the autocomplete, that would be fantastic; until then, I'll probably just remove the zIndex from the dialog and make sure it doesn't show up around the menubar area.

Answer 1

I recall having a similar issue with autocomplete and zIndex, and had to fix it by specifying the appendTo option: $(selector).autocomplete({appendTo: "#copy_dialog"})

This is also useful if you have an autocomplete inside a positioned element. The specific problem I had was an autocomplete inside a fixed position element that stayed in place while the main body scrolled. The autocomplete was displaying correctly but then scrolled with the body rather than staying fixed.

Answer 2

1. Create the dialog
2. Activate auto-complete

This signals to jquery the auto-complete is in a dialog and it has the information available to handle z-indexes.

Answer 3

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.

Answer 4

Changing the z-index only works the first time the drop-down is opened, once closed, the dialog window realizes it has been "tricked" and upgrades its z-index.

Also for me changing the order of creation of the dialog and auto-complete really was a hassle (think big web site, tons of pages) but by chance I had my own openPopup function that wrapped openedDialog. So I came up with the following hack

$("#dialog").dialog({ focus: function () {
    var dialogIndex = parseInt($(this).parent().css("z-index"), 10);
    $(this).find(".ui-autocomplete-input").each(function (i, obj) {
        $(obj).autocomplete("widget").css("z-index", dialogIndex + 1)
    });
});

Each time the dialog has the focus i.e. on 1st opening and when the auto-complete is closed, each auto-complete list's z-index gets updated.

Answer 5

Tried everything mentioned here (some failed whenever I hover over items and return again), but this is the only thing that worked for me in all cases:

$("selector").autocomplete({
    ...
    appendTo: "body",    // <-- do this
    close: function (event, ui){
        $(this).autocomplete("option","appendTo","body");  // <-- and do this  
    }
});    

Answer 6

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