jQuery-UI的自动完成功能无法正常显示，z-index问题

83

我目前正在我的客户网上商店中实现jQuery UI的自动完成功能。问题是：自动完成功能所驻留的元素的z-index值高于自动完成功能的z-index值。我尝试手动设置自动完成z-index，但是我感觉jQuery UI会覆盖它。

实际上，我的问题是自动完成建议列表的重复，错误的z-index，我该如何更改？，但由于没有答案，因此我考虑再次尝试。

欢迎任何帮助！

马丁

— 马丁
source

3

这对您有帮助吗？stackoverflow.com/questions/3549860/…–

— 添

2

由于没有代码的例子我可能会建议设置的z-index，你尝试过将其设置为!important

— 伊戈尔德莫夫

我遇到了同样的问题，但该错误仅在Chrome中出现。这里没有解决方案似乎有效。谁能帮我吗？

— Nivs 2015年

104

使用z-index和!important

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

— 牧场
source

自从我发布此问题以来已经有一段时间了，但是我隐约记得，即使javascript（因此jQuery）被定义为“！important”，它们也能够覆盖CSS属性。

— 马丁

1

在我的自定义样式表上使用！important +1对我来说效果也很好，并且比使用open（）回调更好。

— Alex Fairchild

我接受了这个答案，以我自己的名义接受，因为我同意这个解决方案要好得多。不过我还没有检查答案

— 。– Martijn

我是jQuery新手，这个答案很好。为我工作。我在查找.ui-autocomplete的位置时遇到了麻烦，但最终在jquery-ui.css中找到了它，并为其提供了z-index和中提琴！

— 2014年

好答案。也和我一起工作。只是添加一些花絮。首先，自动完成数据包含在名为ui-autocomplete的类中，然后可以在您的css中按上述方式对其进行样式设置。其次，如果您在Bootstrap中使用自动完成功能，则始终位于最上方的菜单的z索引为1030，因此您需要将其设置为1031。太棒了。谢谢。

— 兰迪·格林康

60

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

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

— 马丁
source

2

为什么返回假？

— Noyo 2013年

事件处理程序中的一般范例是，返回false将防止事件冒泡。虽然经过四年我不知道它是否在这种情况下，实际上是必要的..

— 马亭

2

感谢您的答复，即使是几年后！事实上，这是没有必要在你的情况下，甚至可能引起别人不必要的行为。在任何情况下，这个问题现在有一个标准溶液（ui-front类+appendTo插件选项）：api.jqueryui.com/theming/stacking-elements

— Noyo 2015年

10

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

— 格拉蒂安
source

1

自动完成功能会添加到正文内容的末尾，因此它将具有正文z-index + 1

— Marius 2013年

8

@Marius，您可以使用该appendTo选项告诉菜单标记要去哪里，否则可以将类添加ui-front到输入的父元素之一。

— Noyo

1

还有一两件事：父DIV必须使用相对定位（“位置：亲属”），否则jQuery将不能够确定的Z-index（见bugs.jqueryui.com/ticket/5489）

— 费利克斯·施瓦茨

9

在的CSS中jQuery UI：

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

— Maseo
source

1

欢迎来到StackOverFlow.com，这应该是评论或更详尽的答案。

— Diego C Nascimento 2014年

这是错误的，当jquery ui需要弹出新内容时，它只使用前一个z-index并将其增加1，使用9999使其只能工作一次，则下一个ui元素将具有10.000的z-index再次引起该问题。

— 安德里亚·毛罗

8

试试看，您可以在运行时或初始化时操作z-index

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

— 平板电脑
source

2

如果您能够在自动完成文本输入后强制使用更高的z索引，那么这就是您的问题的解决方案。

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

— 哈里·B
source

2

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

— 拉维拉·辛皮
source

0

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

— pgee70
source

0

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

在模式ui对话框中查看此答案jQuery UI自动完成功能-建议不显示？

— 安德里亚·毛罗（Andrea Mauro）
source

-1

无论如何，请在您的CSS中尝试一下（在脚本加载之前），而不是在Firebug中尝试一下：

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

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

— avall
source

1

由于某些原因，无法通过CSS设置z-index。jQuery只是分配自己的z-index值。确实找到了解决方案（请参见下面的答案）

— Martijn

-1

添加以下内容

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

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

— Zeeshan Ali
source

-1

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

.acResults
{
    z-index:1;
}

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

— 亚瑟尔
source