jQuery UI自动完成不'；t显示在jQuery UI对话框中
我有一个位于对话框中的jQueryUI自动完成。对于一些较旧版本的jQuery/jQueryUI，它显示返回值的列表，而对于最新版本则不显示。此外，我让它在一个页面上正常工作，有很多其他的东西在进行，即使是jQuery/jQueryUI的新版本，它似乎不太好用。显然，我有一些不一样的东西，但我似乎无法确定它是什么。我知道我可以使用css来更改z索引，但这似乎有点太老土了 请参见以下两个实例 （使用jQuery 1.4.3和jQueryUI 1.8.4） （使用jQuery 1.9.1和jQueryUI 1.10.3） 如图所示（或更适用的“未看到”），返回的jQuery 1.9.1/jQueryUI 1.10.3的自动完成匹配显示在对话框后面jQuery UI自动完成不'；t显示在jQuery UI对话框中,jquery,css,jquery-ui,jquery-ui-dialog,jquery-ui-autocomplete,Jquery,Css,Jquery Ui,Jquery Ui Dialog,Jquery Ui Autocomplete,我有一个位于对话框中的jQueryUI自动完成。对于一些较旧版本的jQuery/jQueryUI，它显示返回值的列表，而对于最新版本则不显示。此外，我让它在一个页面上正常工作，有很多其他的东西在进行，即使是jQuery/jQueryUI的新版本，它似乎不太好用。显然，我有一些不一样的东西，但我似乎无法确定它是什么。我知道我可以使用css来更改z索引，但这似乎有点太老土了 请参见以下两个实例 （使用jQuery 1.4.3和jQueryUI 1.8.4） （使用jQuery 1.9.1和jQuer
$("#search").autocomplete("widget").insertAfter($("#dialog").parent());
<!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>
用对话框自动完成
$（函数（）{
$（“#搜索”）.autocomplete({
资料来源：[“一”、“二”、“三”]
});
$（“#dialog”）.dialog（）；
});
一，二，三：
删除了zIndex选项（#8729）与stack选项类似，zIndex选项对于正确的堆栈实现是不必要的。z索引是在CSS中定义的，现在通过确保焦点对话框是其父级中最后一个“堆叠”元素来控制堆叠 不知道这是否是最佳答案，但您可以在对话框后移动自动完成结果
$("#search").autocomplete("widget").insertAfter($("#dialog").parent());
或者对于另一个粗俗的答案，您可以使用jQuery移动z位置。希望有人能想出比我的两个更好的答案
$("#search").autocomplete("widget").css('z-index',1000);
另一个刻薄的回答。使用CSS而不是jQuery来修改问题子级
.ui-autocomplete {z-index:1000}
首先更改代码以创建对话框，然后使自动完成。e、 g
$(function()
{
$("#dialog").dialog();
$( "#search" ).autocomplete({
source: [ "one", "two", "three" ]
});
});
然后，它应该可以正常工作，允许您查看自动完成的结果。更改z索引只在下拉列表第一次打开时起作用，一旦关闭，对话框窗口就会意识到它被“欺骗”，并升级其z索引 另外，对我来说，更改对话框的创建顺序和自动完成确实是一件麻烦事（想想大型网站，成吨的页面），但碰巧我有自己的openPopup函数包装OpenAddialog。所以我想出了下面的方法
$("#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索引都会更新。这已在JQuery UI版本>=11.0.0中显示 在此张贴的门票：
编辑：更新的票号您正确地猜到z-index/appendTo与您的问题有关 您需要将自动完成的appendTo选项设置为对话框中的一个元素，然后自动完成将正确显示 警告：如果结果列表长于对话框内的可用空间，您将获得一个滚动条 我编辑了您的jsbin以反映这一点： JS: HTML:
一，二，三：
PS:Sry很想挖掘出这样一个老问题，但我认为这可能会帮助一些来自谷歌的人（像我一样）。谢谢Keyneom，这一定是为什么我的测试页面不起作用时，一个页面起作用的原因。我把它们放错顺序了。虽然这是可行的（），但需要确保他们不会将它们按错误的顺序放置，这可能会很棘手。您可以尝试将自动完成作为对话框打开事件的一部分，或者尝试创建一个包装器，以便在创建一个您知道会自动完成的对话框时使用。这可能会简化事情。你的公开活动建议可能会有意义。请注意我编辑的原始帖子，其中我引用了最近与所述堆叠相关的更改。让我想知道是否有更好的方法来处理这件事。老兄，你救了我，这让我发疯了！谢谢这应该是选择的答案，工作非常完美。我最近了解到jQueryUI对对话框小部件进行了一些重大更改，以及它如何处理堆栈，如所述。我还不知道这是如何应用的，但我确信它确实适用。谢谢
<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>