jQuery jQueryUI 自动完成功能不适用于对话框和 zIndex
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8685558/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQueryUI autocomplete not working with dialog and zIndex
提问by Francis Lewis
I ran into an interesting issue with jQueryUI autocomplete in a dialog box.
我在对话框中遇到了 jQueryUI 自动完成的一个有趣问题。
My dialog HTML looks like this:
我的对话框 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>
When I run the jQueryUI autocomplete on the above HTML, it works perfect.
当我在上面的 HTML 上运行 jQueryUI 自动完成功能时，它工作得很好。
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.
然后在 FireBug 中，我可以看到自动完成仍在工作。它正在请求和接收结果，但我不再在输入字段下方看到选项列表。
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.
我的想法是，这与对话框上的 zIndex 比自动完成菜单提供的要大得多有关，但我不确定。我仍在研究正在发生的事情的确切细节，但我希望这里有人能给我一些想法。
EditI 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.
编辑我尝试从对话框中删除 zIndex 并且我的自动完成开始显示。不幸的是，我需要 zIndex 值来克服菜单栏的可怕的高 zIndex，我无法更改（无法访问代码的该区域）。因此，如果有一种方法可以将 zIndex 添加到自动完成功能中，那就太棒了；在那之前，我可能只是从对话框中删除 zIndex 并确保它不会出现在菜单栏区域周围。
回答by Xavi
Try setting the appendTooption to "#copy_dialog":
尝试将appendTo选项设置为"#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.
此选项指定自动完成菜单附加到哪个元素。通过将菜单附加到对话框，菜单应该继承正确的 z-index。
回答by arvic.rivera
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.
appendTo：菜单应该附加到哪个元素。当值为 null 时，将检查输入字段的父级是否为“ui-front”类。如果找到具有“ui-front”类的元素，则菜单将附加到该元素。无论值如何，如果没有找到元素，菜单将附加到正文。
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.
这意味着这<div id="copy_dialog" class="ui-front">将奏效。无需使用该选项appendTo，这对我不起作用。
回答by user1357172
The 'appendTo' option does not always work.
'appendTo' 选项并不总是有效。
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.
最令人震惊的是，它不会显示超过对话框的高度，而且，如果您使用 3rd 方实用程序（例如 DataTables 编辑器），您并不总是可以控制何时创建对话框、输入等，当它们附加到 DOM 时，它们具有什么 ID 等。
This seems to alwayswork:
这似乎总是有效：
$(selector).autocomplete({
open: function(event, ui){
var dialog = $(this).closest('.ui-dialog');
if(dialog.length > 0){
$('.ui-autocomplete.ui-front').zIndex(dialog.zIndex()+1);
}
}
});
回答by mhu
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 appendTooption works, but will limit the display to the height of the dialog.
使用 jQuery UI 1.10 时，您不应该弄乱 z-indexes ( http://jqueryui.com/upgrade-guide/1.10/#removed-stack-option)。该appendTo选项有效，但会将显示限制为对话框的高度。
To fix it: make sure the autocomplete element is in the correct DOM order with: autocomplete.insertAfter(dialog.parent())
修复它：确保自动完成元素在正确的 DOM 顺序中：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
单击对话框后更新 z-index 问题
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:
单击对话框后，自动完成的 z-index 似乎发生了变化（如 MatteoC 报告的那样）。下面的解决方法似乎解决了这个问题：
See fiddle: https://jsfiddle.net/sv9L7cnr/
见小提琴：https: //jsfiddle.net/sv9L7cnr/
// initialize autocomplete
input.autocomplete({
source: ...,
open: function () {
autoComplete.zIndex(dlg.zIndex()+1);
}
});
回答by wrschneider
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"})
我记得 autocomplete 和 zIndex 也有类似的问题，必须通过指定 appendTo 选项来修复它： $(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.
如果您在定位元素中有自动完成功能，这也很有用。我遇到的具体问题是在主体滚动时保持原位的固定位置元素内的自动完成。自动完成显示正确，但随后随着身体滚动而不是保持固定。
回答by dkelley
Through pursuing this problem myself I discovered that appendTohas to be set before the dialog is opened. The same seems to apply to setting (or modifying) the source property.
通过自己解决这个问题，我发现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")
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.
这可能只是对话框打开的副产品，或者没有正确处理元素。但事情发生的顺序似乎很重要。
回答by Liron
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.
对我有用的是上面帖子的组合。我添加了 myModal ID 而不是 body 并添加了 close 事件。
$("selector").autocomplete({
...
appendTo: "#myModalId", // <-- do this
close: function (event, ui){
$(this).autocomplete("option","appendTo","#myModalId"); // <-- and do this
}
});
回答by akn
user1357172's solutionworked for me but in my opinion it needs two imprevements.
user1357172 的解决方案对我有用，但在我看来它需要两个改进。
If appendTois set to null, we can find the closest .ui-frontelement instead of .ui-dialog, because our autocompleteshould be already attached to it. Then we should change the z-indexonly 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')
如果appendTo设置为null，我们可以找到最接近的.ui-front元素而不是.ui-dialog，因为我们autocomplete应该已经附加到它了。然后我们应该更改z-indexonly for 相关小部件（相关 ul 列表），而不是使用 class 更改所有现有元素.ui-autocomplete.ui-front。我们可以通过使用找到相关的小部件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.
顺便说一句，此解决方案有效，但看起来有点笨拙，因此它可能不是最好的解决方案。
回答by Timothy Gonzalez
- Create the dialog
- Activate auto-complete
- 创建对话框
- 激活自动完成
This signals to jquery the auto-complete is in a dialog and it has the information available to handle z-indexes.
这向 jquery 发出信号，自动完成位于对话框中，并且它具有可用于处理 z-index 的信息。
回答by BobB
Super simple solution. Increase the z-index for the autocomplete. When it is active I am pretty sure you want it on top :)
超级简单的解决方案。增加自动完成的 z-index。当它处于活动状态时，我很确定您希望它位于顶部 :)
.ui-autocomplete {
z-index: 2000;
}
