Javascript jQuery-UI 的自动完成不能很好地显示，z-index 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6762174/
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
jQuery-UI's autocomplete not display well, z-index issue
提问by Martijn
I'm currently implementing jQuery UI's autocomplete in my clients webshop. The problem is: the element the autocomplete resides in, has a higher z-index then the z-index of the autocomplete. I tried setting the autocomplete z-index manually, but I've got the feeling that jQuery UI is overwriting this.
我目前正在我的客户网上商店中实现 jQuery UI 的自动完成功能。问题是：自动完成所在的元素的 z-index 高于自动完成的 z-index。我尝试手动设置自动完成 z-index，但我感觉 jQuery UI 正在覆盖它。
In fact my question is a duplicate of autocomplete suggestion list wrong z-index, how can i change?, but since there was no answer I thought about giving it another try.
事实上，我的问题是自动完成建议列表错误的 z-index重复，我该如何更改？，但由于没有答案，我想再试一次。
Any help is welcome!
欢迎任何帮助！
Martijn
马丁
回答by Ranch
Use z-indexand !important
使用z-index和!important
.ui-autocomplete { position: absolute; cursor: default;z-index:30 !important;}
回答by Martijn
While searching I found this topic (http://forum.jquery.com/topic/alternating-style-on-autocomplete). Apparently the only way to change the style of the autocomplete box is by doing it through javascript:
在搜索时我发现了这个话题（http://forum.jquery.com/topic/alternating-style-on-autocomplete）。显然，更改自动完成框样式的唯一方法是通过 javascript 进行：
open: function(){
$(this).autocomplete('widget').css('z-index', 100);
return false;
},
回答by Gratian
Change the z-index of the parent Div, the autocomplete menu will have the div's z-index+1
改变父div的z-index，自动完成菜单会有div的z-index+1
回答by maseo
In the CSS of jQuery UI:
在 CSS 中jQuery UI：
.ui-front { z-index: 9999; }
回答by Ipad
Try this, you can manipulate the z-index on runtime or initializing
试试这个，你可以在运行时或初始化时操作 z-index
$('#autocomplete').autocomplete({
open: function(){
setTimeout(function () {
$('.ui-autocomplete').css('z-index', 99999999999999);
}, 0);
}
});
回答by raviraj shimpi
open: function () {
$(this).autocomplete('widget').zIndex(10);
}
回答by Harry B
If you are able to enforce a higher z-index upon the autocomplete text input then this is the solution to your problem.
如果您能够对自动完成文本输入强制执行更高的 z-index，那么这就是您问题的解决方案。
jQuery UI Autocomplete options list calculates its z-index value by taking the z-index of the text input it's being attached to and adds 1 to that value.
jQuery UI 自动完成选项列表通过获取它所附加到的文本输入的 z-index 并将该值加 1 来计算其 z-index 值。
So you can give a z-index of 999 to the text input the autocomplete will have a z-index value of 1000
因此，您可以为文本输入提供 999 的 z-index，自动完成的 z-index 值为 1000
Taken from http://bugs.jqueryui.com/ticket/5489
取自http://bugs.jqueryui.com/ticket/5489
<input type="text" class="autocomplete" style="z-index:999;" name="foo">
回答by Andrea Mauro
If you are using jquery-ui dialogs be careful to initialize the dialogs BEFORE the autocomplete or the autocomplete will be shown under the dialog.
如果您使用 jquery-ui 对话框，请小心在自动完成之前初始化对话框，否则自动完成将显示在对话框下方。
Look at this answer jquery UI autocomplete inside a modal ui dialog - suggestions not showing?
看看这个答案jquery UI autocomplete inside a modal ui dialog - 建议没有显示？
回答by pgee70
also have a look at where you are appending the item to. i came across this problem when i appended the autocomplete to an inner div, but when i appended the autocomplete to the body tag, the problem went away.
还可以查看将项目附加到的位置。当我将自动完成附加到内部 div 时遇到了这个问题，但是当我将自动完成附加到 body 标签时，问题就消失了。
回答by Zeeshan Ali
add the following
添加以下内容
.ui-autocomplete
{
z-index:100 !important;
}
in jquery-custom-ui.css file (or the minified one if you are using it).
在 jquery-custom-ui.css 文件中（如果您正在使用它，则为缩小的文件）。
