13

我有一个位于对话框中的 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 对话框的更改并在下面重复是我的问题的原因。我不确定如何最好地应用它们，并希望得到任何建议。

添加了 appendTo 选项 (#7948) 以前，对话框总是附加到正文中，以确保它们是 DOM 中的最后一个元素，以避免与其他堆叠上下文发生冲突。但是，为了提供更大的灵活性并简化堆叠逻辑，添加了一个 appendTo 选项，该选项默认为主体。查看 API 文档以获取更多信息。

删除了堆栈选项 (#8722) 对话框以前支持堆栈选项，该选项确定对话框在获得焦点时是否应移动到顶部。由于应该始终如此，因此已删除该选项。

删除了 zIndex 选项 (#8729) 与 stack 选项类似，zIndex 选项在适当的堆叠实现中是不必要的。z-index 在 CSS 中定义，现在通过确保焦点对话框是其父级中的最后一个“堆叠”元素来控制堆叠。

4

7 回答 7

25

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

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

然后它应该可以正常工作，让您可以看到自动完成的结果。

于 2013-07-19T20:54:41.510 回答
5

另一个骇人听闻的答案。使用 CSS 而不是 jQuery 来修改问题子项。

.ui-autocomplete {z-index:1000}

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

于 2013-07-19T20:37:37.570 回答
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：不好意思挖掘这么老的问题，但我认为它可能会帮助一些从谷歌来到这里的人（比如我）。

于 2015-11-24T13:04:10.953 回答
2

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

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

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

于 2013-07-19T20:29:08.937 回答
2

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

同样对我来说，更改对话框的创建顺序和自动完成确实很麻烦（想想大型网站，大量页面），但偶然我有自己的 openPopup 函数来包装 openDialog。所以我想出了以下技巧

$("#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 都会更新。

于 2014-07-25T18:43:37.830 回答
1

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

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

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

于 2013-07-19T20:24:33.833 回答
1

这已出现在 JQuery UI Versions >= 11.0.0 中。

票张贴在这里： http ://bugs.jqueryui.com/ticket/10696

编辑：更新的票号

于 2014-11-11T20:30:40.407 回答