JQuery-UI 的自动补全显示不好，z-index 问题

我目前正在我的客户端网络商店中实现 jQueryUI 的自动完成功能。问题是: 自动补全所在的元素的 z 索引比自动补全的 z 索引高。我尝试手动设置自动完成 z-index，但我感觉 jQuery UI 正在覆盖这一点。

事实上，我的问题是一个复制的 自动完成建议列表错误的 z 索引，我如何改变？，但由于没有答案，我想再试一次。

欢迎任何帮助！

马丁

80977 次浏览
小开

Give it a try anyway in your css (before script loading), not in firebug:

.ui-selectmenu-menu {
z-index:100;
}

In my case this works and creates z-indexes like : 100x (for example 1002)

小开

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:

    open: function(){
$(this).autocomplete('widget').css('z-index', 100);
return false;
},
小开

Change the z-index of the parent Div, the autocomplete menu will have the div's z-index+1

小开
最佳答案

Use z-index and !important

.ui-autocomplete { position: absolute; cursor: default;z-index:30 !important;}
小开

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.

小开

Try this, you can manipulate the z-index on runtime or initializing

$('#autocomplete').autocomplete({
open: function(){
setTimeout(function () {
$('.ui-autocomplete').css('z-index', 99999999999999);
}, 0);
}
});
小开

add the following 

.ui-autocomplete
{
z-index:100 !important;
}

in jquery-custom-ui.css file (or the minified one if you are using it).

小开

If you are able to enforce a higher z-index upon the autocomplete text input then this is the solution to your problem.

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.

So you can give a z-index of 999 to the text input the autocomplete will have a z-index value of 1000

Taken from http://bugs.jqueryui.com/ticket/5489

<input type="text" class="autocomplete" style="z-index:999;" name="foo">
小开

In the CSS of jQuery UI:

.ui-front { z-index: 9999; }
小开 
open: function () {
$(this).autocomplete('widget').zIndex(10);
}
小开

For those developers that still use this plugin. Try this:

.acResults
{
z-index:1;
}

For me was enough with z-index:1, set the value you need in your case.

小开

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.

Look at this answer jquery UI autocomplete inside a modal ui dialog - suggestions not showing?

小开

I was facing same issue, it has been resolved by adding bellow styles:

.ui-autocomplete {
position: absolute;
cursor: default;
z-index:30!important;
}
.modal-dialog {
pointer-events:auto !important;
}

提交答案