升级到jQuery UI 1.10.3后，jQuery的自动完成下拉列表未显示

Question

在我的Ruby on Rails应用程序中，我使用的是jQuery UI 1.9.2（通过jquery-ui-rails）。我在Modal对话框表单中有一个Autocomplete字段，它使用Ajax和Json填充它的下拉列表建议框。它工作正常，向我展示了正确的建议。

我随后升级到jQuery UI 1.10.3（使用bundle update），现在自动完成下拉列表建议框不再有效。它在JavaScript控制台中没有显示错误。实际上它表明返回的Json是正确的。

我尝试重写JS中的自动完成功能以手动执行调用（使用自动完成的source: $.ajax {}调用但仍然没有。

有人向我建议问题可能是jQuery改变了导致jquery-ui-rails gem停止工作的东西，但在向他们提交bug ticket之后，事实证明这不是问题

任何帮助都将不胜感激。

答案注意：
mhu's answer是正确的，你应该尽可能避免篡改z索引（这就是我将其标记为正确的原因）。 然而在我的情况下（自动填充文本框位于模态对话框中）下拉列表将仅显示在对话框的宽度内（如果文本宽于此值，则隐藏并且你不能使用滚动条）。由于我不想这样做，我按照下面my answer中的描述进行了操作。我确实对自己做了各种评论和注释，以确保它在任何jQueryUI更新后仍然有效。

Answer 1

在每个地方搜索此问题之后，我发现没有人能解决我的问题，因为我无法生成任何错误消息，而且我显示的代码是合理的。有人建议我阅读jQuery更改日志（事实上我没有），我发现了jQuery中的错误以及解决方法：

在jQuery UI 1.10.1 changelog的自动填充功能部分下方显示：

Added: Use .ui-front instead of .zIndex() for the suggestions menu. (7d5fe02)

按照提供的链接并查看jQuery代码修复，给了我一个想法：我执行了自动完成搜索，然后我将模态对话框移到了一边！就在那时我注意到Autocoplete下拉建议菜单背后模态对话框。

我通过添加以下CSS规则来修复此问题：

ul.ui-autocomplete.ui-menu {
  z-index: 1000;
}

我已经向jQuery提交了Bug ticket，所以我希望它将由1.10.4处理，以便不再需要解决方法。

我希望这也有助于其他人。

Answer 2

使用jQuery UI 1.10时，不应该使用z-indexes（http://jqueryui.com/upgrade-guide/1.10/#removed-stack-option）。只需确保自动完成元素具有正确的DOM顺序： autocomplete .insertAfter（ dialog .parent（））

示例

 var autoComplete,
     dlg = $("#dialog"),
     input = $("#input");

 // initialize autocomplete
 input.autocomplete({
     ...
 });

 // get reference to autocomplete element
 autoComplete = input.autocomplete("widget");

 // init the dialog containing the input field
 dlg.dialog({
      ...
 });

 // move the autocomplete element after the dialog in the DOM
 autoComplete.insertAfter(dlg.parent());