jQuery-UI 自动完成不会显示在 jQuery-UI 对话框中
Posted
技术标签:
【中文标题】jQuery-UI 自动完成不会显示在 jQuery-UI 对话框中【英文标题】：jQuery-UI autocomplete doesn't display in jQuery-UI dialog 【发布时间】：2013-07-19 04:29:05 【问题描述】：我有一个位于对话框中的 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 中定义，现在通过确保焦点对话框是其父级中的最后一个“堆叠”元素来控制堆叠。
【问题讨论】：
我最近了解到，jQueryUI 对对话框小部件以及它如何处理堆栈进行了一些重大更改，如jqueryui.com/upgrade-guide/1.10 所述。我还不知道这是如何应用的，但我确信确实如此。谢谢 【参考方案1】：不知道这是否是最佳答案，但您可以将自动完成结果移到对话框之后。
$("#search").autocomplete("widget").insertAfter($("#dialog").parent());
http://jsbin.com/uciriq/4/
【讨论】：
【参考方案2】：或者对于另一个 hackish 答案，您可以使用 jQuery 移动 z 位置。希望有人提出比我的两个更好的答案。
$("#search").autocomplete("widget").css('z-index',1000);
http://jsbin.com/uciriq/5/
【讨论】：
【参考方案3】：另一个骇人听闻的答案。使用 CSS 而不是 jQuery 来修改问题子项。
.ui-autocomplete z-index:1000
http://jsbin.com/uciriq/6/edit
【讨论】：
【参考方案4】：更改您的代码以首先创建对话框，然后自动完成。例如
$(function()
$("#dialog").dialog();
$( "#search" ).autocomplete(
source: [ "one", "two", "three" ]
);
);
然后它应该可以正常工作，让您看到自动完成的结果。
【讨论】：
感谢 Keyneom，这一定是为什么我的测试页没有，而单页工作的原因。我以错误的顺序将它们包括在内。虽然这可行 (jsbin.com/uciriq/9)，但需要确保他们永远不会把它们放在错误的顺序上，这可能会很棘手。 您可以尝试让自动完成成为对话框打开事件的一部分，或者您可以尝试创建一个包装器，在创建您知道会自动完成的对话框时使用该包装器。它可能会简化事情。 您的公开活动建议可能有意义。请注意我编辑过的原始帖子，其中我引用了jqueryui.com/upgrade-guide/1.10 描述的与堆叠相关的最新更改。让我想知道是否有更好的方法来处理这个问题。 哥们你救了我，这让我快疯了！谢谢！ 这应该是选择的答案，效果很好。【参考方案5】：更改 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 都会更新。
【讨论】：
【参考方案6】：这已出现在 JQuery UI 版本 >= 11.0.0 中。
票张贴在这里：http://bugs.jqueryui.com/ticket/10696
编辑：更新票号
【讨论】：
【参考方案7】：您猜对了，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：不好意思挖掘这么老的问题，但我认为它可能会帮助一些从谷歌来到这里的人（比如我）。
【讨论】：
以上是关于jQuery-UI 自动完成不会显示在 jQuery-UI 对话框中的主要内容，如果未能解决你的问题，请参考以下文章
jQuery-UI 的自动完成不能很好地显示，z-index 问题