jQueryUI自动完成不与对话框和zIndex一起工作

Question

我遇到了一个对话框中jQueryUI自动完成的有趣问题。

我的对话框HTML看起来像这样：

<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> 

当我运行在上面的HTML jQueryUI的自动完成功能，它可以完美运行。

当我打开它在Firebug使用对话框

$('#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; 
}); 

然后，我可以看到自动完成仍然是工作。它请求并接收结果，但我不再看到输入字段下方的选项列表。

我的想法是，这与对话框中的zIndex比自动完成菜单给出的zIndex有关，但我不确定。 我仍在研究发生了什么的确切细节，但我希望这里有人会对我有一些想法。

编辑 我试着从对话框中删除zIndex，我的自动完成开始显示出来。 不幸的是，我需要这个zIndex值来获取菜单栏的可怕的高zIndex，这是我无法改变的（无法访问该代码的区域）。因此，如果有一种方法可以将zIndex添加到自动完成功能中，那就太棒了;在此之前，我可能会从对话框中删除zIndex，并确保它不会显示在菜单栏区域周围。

Answer 1

尝试appendTo选项设置为"#copy_dialog"：

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

此选项指定元件的自动完成菜单附加到。通过将菜单附加到对话框上，菜单应该继承正确的Z-index。

Answer 2

我记得有与自动完成和zIndex的一个类似的问题，不得不通过指定appendTo选项来解决这个问题：$(selector).autocomplete({appendTo: "#copy_dialog"})

，如果你有一个定位的元素内自动完成这也是有用的。我遇到的具体问题是固定位置元素内的自动完成，在主体滚动时停留在原位。自动完成显示正确，但随后与身体滚动，而不是保持固定。

Answer 3

通过自己追求这个问题，我发现appendTo必须在对话框打开之前设置。这似乎也适用于设置（或修改）源属性。

$("#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") 

这可能只是对话框打开的副作用，或者不正确地处理元素。但事情发生的顺序似乎很重要。

Answer 4

当使用jQuery UI 1.10时，你不应该混淆z-索引（http://jqueryui.com/upgrade-guide/1.10/#removed-stack-option）。 appendTo选项可用，但会将显示限制在对话框的高度。

要解决这个问题：确保自动完成元件与正确的DOM顺序：自动完成 .insertAfter（对话框。父（））

例

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

更新对话框中，点击后的z-index问题

自动完成的z指数似乎在对话框上点击后改变（如MatteoC所报道）。下面的解决方法似乎解决这个问题：

见琴：https://jsfiddle.net/sv9L7cnr/

// initialize autocomplete 
input.autocomplete({ 
    source: ..., 
    open: function() { 
     autoComplete.zIndex(dlg.zIndex()+1); 
    } 
}); 

Answer 5

此链接为我工作。

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

上午使用jQuery-UI-1.10.3。

我在jquery对话框的“open”事件中配置了自动完成组合框。

Answer 6

appendTo：该菜单应该附加到哪个元素。当值 为空时，输入字段的父项将被检查为“ui-front”类的 。如果找到具有“ui-front”类的元素，则菜单 将被追加到该元素。无论价值如何，如果找不到 元素，菜单将被追加到主体。

这意味着<div id="copy_dialog" class="ui-front">将做的伎俩。没有必要使用选项appendTo，这不适合我。

Answer 7

更改z-index仅在第一次打开下拉菜单时生效，一旦关闭，对话窗口意识到它已被“欺骗”并升级其z-index。

另外对我来说，改变对话框的创建顺序和自动完成确实是一个麻烦（认为大网站，大量的网页），但偶然我有我自己的openPopup函数，包装openedDialog。所以，我想出了下面的技巧

$("#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) 
    }); 
}); 

每次对话都有1日开时，自动完成关闭的重点，即每一个自动完成列表的z-index的得到更新。

Answer 8

'appendTo'选项并不总是有效。

最令人震惊的是，它不会显示超过对话框的高度，而且，如果您使用的是第三方实用工具（例如DataTables编辑器），则在对话框，输入等时不总是能够控制。正在创建，当它们连接到DOM时，它们拥有什么ID等等。

这似乎总是工作：

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

Answer 9

这里（有的失败，每当我将鼠标悬停在项目，并再次返回），但是这是 唯一为我工作提到

尝试一切在所有情况下：

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

Answer 10

user1357172的solution为我工作，但在我看来，这需要两个imprevements。

如果appendTo设置为null，我们可以找到最接近.ui-front元素而不是.ui-dialog，因为我们autocomplete应该已经被连接到它。然后，我们应该更改z-index仅用于相关小部件（相关的ul列表），而不是使用类.ui-autocomplete.ui-front更改所有现有元素。我们可以通过使用elem.autocomplete('widget')

解决方案找到相关的部件：

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此解决方案，但它看起来有点哈克，所以它不是可能是最好的一个。

Answer 11

对我而言有效的是上述文章的组合。 我添加了myModal ID而不是body，并添加了关闭事件。

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

Answer 12

open:function(event){ 

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

}, 

Answer 13

1. 创建对话框
2. 激活自动完成

此信号jQuery的自动完成是一个对话框，它可用来处理Z-信息索引。

Answer 14

超简单的解决方案。增加自动完成的z-index。当它是活跃的，我很确定你想要它顶部:)

.ui-autocomplete { 
z-index: 2000; 
}