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

Posted 2023-03-05

【中文标题】jQuery-UI 的自动完成不能很好地显示，z-index 问题

【英文标题】：jQuery-UI's autocomplete not display well, z-index issue

【发布时间】：2011-10-09 09:11:35

【问题描述】：

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

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

欢迎任何帮助！

马丁

【问题讨论】：

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

由于没有代码示例，我可能会建议您像之前尝试的那样设置 z-index 并将其设置为 !important

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

【参考方案1】：

在你的 css 中尝试一下（在脚本加载之前），而不是在 firebug 中：

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

在我的情况下，这可以创建 z-indexes，例如：100x（例如 1002）

【讨论】：

由于某种原因，通过 CSS 设置 z-index 不起作用。 jQuery 只是分配它自己的 z-index 值。不过确实找到了解决方案（请参阅下面的答案）

【参考方案2】：

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

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

【讨论】：

你为什么返回 false？

事件处理程序的一般范例是返回 false 将防止事件冒泡。虽然四年后我不知道在这种情况下是否真的有必要..

感谢您的回复，即使是多年以后！事实上，这在您的情况下是不需要的，甚至可能会导致其他人出现不良行为。无论如何，这个问题现在有一个标准解决方案（ui-front 类 + appendTo 小部件选项）：api.jqueryui.com/theming/stacking-elements

【参考方案3】：

改变父div的z-index，自动完成菜单会有div的z-index+1

【讨论】：

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

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

还有一点：父 div 必须使用相对定位（'position: relative'）否则 jQuery 将无法确定其 z-index（参见 bugs.jqueryui.com/ticket/5489）

【参考方案4】：

使用z-index 和!important

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

【讨论】：

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

+1 在我的自定义样式表上使用 !important 对我来说也非常有效，并且是比使用 open() 回调更好的解决方案。

我已经接受了这个有利于我自己的答案，因为我同意这个解决方案要好得多。虽然我还没有检查答案..

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

很好的答案。还和我一起工作。只是为了添加一些花絮。首先，自动完成数据包含在一个名为 ui-autocomplete 的类中，然后可以像上面那样在你的 css 中设置样式。其次，如果您在 Bootstrap 中使用自动完成功能，则始终位于顶部的菜单的 z-index 为 1030，因此您需要将此设置为 1031。很棒的解决方案。谢谢。

【参考方案5】：

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

【参考方案6】：

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

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

【参考方案7】：

添加以下内容

.ui-autocomplete

    z-index:100 !important;

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

【参考方案8】：

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

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

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

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

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

【参考方案9】：

在jQuery UI的CSS中：

.ui-front  z-index: 9999; 

【讨论】：

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

错了，当 jquery ui 需要弹出一些新的东西时，它只需要以前的 z-index 并将其增加 1，使用 9999 使它只工作一次，下一个 ui 元素将有一个 z- 10.000 的索引再次导致该问题。

【参考方案10】：

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

【参考方案11】：

对于那些仍然使用这个插件的开发者。试试这个：

.acResults

    z-index:1;

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

【参考方案12】：

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

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