jQueryUI autocomplete not working with dialog and zIndex

前端 未结 14 1093
孤独总比滥情好
孤独总比滥情好 2021-02-05 00:51

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

My dialog HTML looks like this:

相关标签:
14条回答
  • 2021-02-05 01:11

    What worked for me was a combination of the post above. I added the myModal ID instead of body and added the close event as well.

    $("selector").autocomplete({
        ...
        appendTo: "#myModalId",    // <-- do this
        close: function (event, ui){
            $(this).autocomplete("option","appendTo","#myModalId");  // <-- and do this  
        }
    }); 
    
    0 讨论(0)
  • 2021-02-05 01:22

    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);
            }
        }
    });
    
    0 讨论(0)
提交回复
热议问题