jQueryUI autocomplete not working with dialog and zIndex

Question

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

My dialog HTML looks like this:

    

        
                      

              相关标签:
       
      

Answer 1

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 2

This link worked for me.

https://github.com/taitems/Aristo-jQuery-UI-Theme/issues/39

Am using jquery-ui-1.10.3.

I configured the autocomplete combobox inside the "open" event of the jquery dialog.

Answer 3

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 4

Through pursuing this problem myself I discovered that appendTo has to be set before the dialog is opened. The same seems to apply to setting (or modifying) the source property.

$("#mycontrol").autocomplete({appendTo:"#myDialog",source:[..some values]})
$("#mycontrol").autocomplete("option","source",[...some different values]) // works

// doesn't work if the lines above come after
$("#myDialog").dialog("open")

This might just be a byproduct of what dialog open does, or not correctly addressing the element. But the order things happen seems to matter.

Answer 5

open:function(event){

        var target = $(event.target); 
        var widget = target.autocomplete("widget");
        widget.zIndex(target.zIndex() + 1); 

},

Answer 6

user1357172's solution worked for me but in my opinion it needs two imprevements.

If appendTo is set to null, we can find the closest .ui-front element instead of .ui-dialog, because our autocomplete should be already attached to it. Then we should change the z-index only for related widget (related ul list) instead of changing all existing elements with class .ui-autocomplete.ui-front. We can find related widget by using elem.autocomplete('widget')

Solution:

elem.autocomplete({
    open: function(event, ui){
        var onTopElem = elem.closest('.ui-front');
        if(onTopElem.length > 0){
            var widget = elem.autocomplete('widget');
            widget.zIndex(onTopElem.zIndex() + 1);
        }
    }
});

BTW this solution works but it looks bit hacky, so it is not probably the best one.