Question

我有一个位于对话框中的jQueryUI自动完成功能。对于某些旧版本的jQuery / jQueryUI，它显示返回值列表，而对于最新版本则不显示。此外，我已经在一个页面上正常工作，即使使用新版本的jQuery / jQueryUI，其他一些东西仍在进行，这似乎并不好看。显然，我有一些不同的东西，但我似乎无法确定它是什么。我知道我可以使用css来改变z-index，但这看起来几乎有点hackish。

请参阅以下两个实例。

http://jsbin.com/uciriq/3/（使用jQuery 1.4.3和jQueryUI 1.8.4）

http://jsbin.com/uciriq/2/（使用jQuery 1.9.1和jQueryUI 1.10.3）

如所见（或更适用的陈述“未见”），jQuery 1.9.1 / jQueryUI 1.10.3的返回自动完成匹配显示在对话框后面。

允许返回自动填充匹配的最佳解决方案是什么？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
        <title>autocomplete with dialog</title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js" type="text/javascript"></script>
        <!--
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js" type="text/javascript"></script>
        -->

        <script type="text/javascript">
            $(function() {
                $( "#search" ).autocomplete({
                    source: [ "one", "two", "three" ]
                });
                $("#dialog").dialog();
            });
        </script>

    </head>
    <body>
        <div id="dialog" class="dialog" title="Testing">
            <div class="ui-widget">
                <label for="search">one, two, three: </label>
                <input id="search" />
            </div>
        </div>

    </body>
</html>

编辑我认为http://jqueryui.com/upgrade-guide/1.10/所描述的对jQueryUI Dialog的更改以及下面重复的是我的问题的原因。我不确定如何最好地应用它们，并且不胜感激任何建议。

添加了appendTo选项（＃7948）以前，对话框始终附加到正文以确保它们是DOM中的最后一个元素，以避免与其他堆叠上下文冲突。但是，为了提供更大的灵活性并简化堆叠逻辑，添加了一个默认为正文的appendTo选项。有关更多信息，请查看API文档。

删除堆栈选项（＃8722）对话框以前支持堆栈选项，该选项确定在聚焦时对话框是否应移至顶部。由于情况总是这样，因此已经删除了opiton。

删除了zIndex选项（＃8729）与堆栈选项类似，使用正确的堆叠实现时，zIndex选项是不必要的。 z-index在CSS中定义，现在通过确保聚焦对话框是其父级中的最后一个“堆叠”元素来控制堆叠。

Answer 1

更改代码以首先创建对话框，然后自动完成。 e.g。

$(function()
{
  $("#dialog").dialog();
  $( "#search" ).autocomplete({
    source: [ "one", "two", "three" ]
    });
});

然后它应该正常工作，允许您查看自动完成的结果。

Answer 2

另一个hackish的回答。使用CSS而不是jQuery来修改问题孩子。

.ui-autocomplete {z-index:1000}

http://jsbin.com/uciriq/6/edit

Answer 3

您猜对了 z-index / appendTo 与您的问题有关。

您需要将自动填充的 appendTo 选项设置为对话框内的元素，然后正确显示自动填充。

警告：如果结果列表长于对话框中的可用空间，您将获得一个滚动条。

我编辑了你的jsbin以反映这一点：http://jsbin.com/vavevugoqi/

JS：

$( "#search" ).autocomplete({
  appendTo: "#myContainer",
  source: [ "one", "two", "three" ]
});

HTML：

<div id="dialog" class="dialog" title="Testing">
    <div id="myContainer" class="ui-widget">
        <label for="search">one, two, three: </label>
        <input id="search" />
    </div>
</div>

PS：想要挖出这么老的问题，但我认为这可能有助于一些人从谷歌来到这里（像我一样）。

Answer 4

或者对于另一个hackish的答案，你可以使用jQuery来移动z位置。希望有人能提出比我两个更好的答案。

$("#search").autocomplete("widget").css('z-index',1000);

http://jsbin.com/uciriq/5/

Answer 5

更改z-index仅在第一次打开下拉列表时起作用，一旦关闭，对话框窗口就会意识到它已被“欺骗”并升级其z-index。

另外，对我来说，改变对话框的创建顺序和自动完成真的很麻烦（想想大网站，大量的页面）但是我偶然拥有了自己的openPopup函数，它包含了opensDialog。所以我想出了以下黑客

$("#dialog").dialog({ focus: function () {
    var dialogIndex = parseInt($(this).parent().css("z-index"), 10);
    $(this).find(".ui-autocomplete-input").each(function (i, obj) {
        $(obj).autocomplete("widget").css("z-index", dialogIndex + 1)
    });
});

每次对话都有焦点，即第一次打开时，当自动完成关闭时，每个自动完成列表的z-index都会更新。

Answer 6

不知道这是否是最佳答案，但您可以在对话框后移动自动填充结果。

$("#search").autocomplete("widget").insertAfter($("#dialog").parent());

http://jsbin.com/uciriq/4/

Answer 7

这已在JQuery UI Versions＆gt; = 11.0.0中显示。

此处发布的票证：http://bugs.jqueryui.com/ticket/10696

修改：更新了票号

jQuery-UI自动完成不会显示在jQuery-UI对话框中

7 个答案: