Question

我目前正在我的客户网店中实现jQuery UI的自动完成功能。问题是：自动完成所在的元素具有更高的z-index，然后是自动完成的z-index。我尝试手动设置自动完成z-index，但我觉得jQuery UI会覆盖它。

事实上我的问题是autocomplete suggestion list wrong z-index, how can i change?的副本，但由于没有答案，我想再试一次。

欢迎任何帮助！

马亭

Answer 1

使用z-index和!important

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

Answer 2

在搜索时我发现了这个主题（http://forum.jquery.com/topic/alternating-style-on-autocomplete）。显然，改变自动填充框样式的唯一方法是通过javascript：

进行

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

Answer 3

更改父Div的z-index，自动完成菜单将具有div的z-index + 1

Answer 4

在jQuery UI的CSS中：

.ui-front { z-index: 9999; }

Answer 5

试试这个，你可以在运行时操作z-index或初始化

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

Answer 6

如果您能够在自动填充文本输入上强制执行更高的z-index，那么这就是您问题的解决方案。

jQuery UI自动填充选项列表通过获取附加到的文本输入的z-index来计算其z-index值，并将该值加1。

因此，您可以为文本输入提供999的z-index，自动完成将具有z-index值1000

取自http://bugs.jqueryui.com/ticket/5489

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

Answer 7

open: function () {
    $(this).autocomplete('widget').zIndex(10);
}

Answer 8

还可以查看您要将项目附加到的位置。当我将自动完成添加到内部div时，我遇到了这个问题，但是当我将自动完成添加到body标签时，问题就消失了。

Answer 9

如果您使用的是jquery-ui对话框，请注意在自动完成之前初始化对话框，否则自动完成将显示在对话框下方。

看看这个答案jquery UI autocomplete inside a modal ui dialog - suggestions not showing?

Answer 10

无论如何都要在你的css中尝试（在加载脚本之前），而不是在firebug中：

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

在我的情况下，这可以工作并创建z索引，如：100x（例如1002）

Answer 11

添加以下内容

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

在jquery-custom-ui.css文件中（如果你使用它，则为缩小的文件）。

Answer 12

对于仍然使用此插件的开发人员。试试这个：

.acResults
{
    z-index:1;
}

对于我来说，z-index：1就足够了，设置你需要的值。

jQuery-UI的自动完成功能不能很好地显示z-index问题

12 个答案: