jQueryUI autocomplete not working with dialog and zIndex

前端 未结 14 1077
孤独总比滥情好
孤独总比滥情好 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:05

    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.

    0 讨论(0)
  • 2021-02-05 01:05

    Super simple solution. Increase the z-index for the autocomplete. When it is active I am pretty sure you want it on top :)

    .ui-autocomplete {
     z-index: 2000;
    }
    
    0 讨论(0)
  • 2021-02-05 01:07

    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.

    0 讨论(0)
  • 2021-02-05 01:09

    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);
        }
    });
    
    0 讨论(0)
  • 2021-02-05 01:09
    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.

    0 讨论(0)
  • 2021-02-05 01:10

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