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

Question

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

随后我升级到jQuery UI 1.10.3（使用bundle update），现在Autocomplete下拉建议框不再工作。在JavaScript控制台中没有显示任何错误。实际上它显示返回的Json是正确的。

我尝试重写JS中的自动完成函数以手动执行调用（使用自动完成的source：$ .ajax {}调用），仍然没有任何作用。

有人建议我问题可能是jQuery改变了某些东西，导致jquery-ui-rails gem停止工作，但在向他们提交错误票之后，结果并非如此。

感谢任何帮助。 答案注意事项：
mhu的答案是正确的，应尽量避免篡改z-Index（这就是为什么我标记它为正确的原因）。然而，在我的情况下（其中Autocomplete文本框位于Modal Dialog中），下拉菜单只会在对话框框架宽度内显示（如果文本比它更宽，则会隐藏并且您无法使用滚动条）。因为我不想要这个，所以我做了我的答案中所描述的方法，它可以正常工作。我进行了各种注释和提示，以确保在任何jQueryUI更新后仍然可以正常工作。

- Theo Scholiadis

Answer 1

在到处搜索这个问题后，我发现没有人能够解决我的问题，因为我无法产生任何错误信息，而我展示的代码是正确的。有人建议我阅读jQuery更改日志（我承认我没有），在那里我找到了jQuery中的错误以及解决方法：

在jQuery UI 1.10.1 更改日志中，在自动完成部分中写道：

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

点击提供的链接并检查jQuery代码修复方法，我有了一个想法：我进行了自动完成搜索，然后将模态对话框移到了一边！这时我注意到自动完成下拉建议菜单在模态对话框的后面。

我通过添加以下CSS规则来解决这个问题:

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

我已向jQuery提交了一个Bug工单（链接），希望在1.10.4版本中解决，这样就不再需要绕过问题了。希望这能对其他人有所帮助。

- Theo Scholiadis

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());

- mhu

---

但是这比以前复杂多了...我知道你可能不知道原因，但这似乎意味着我突然需要比以前多执行2个步骤。 - Theo Scholiadis

实际上只有一条语句：autoComplete.insertAfter(dlg.parent());。其余的都是设置自动完成所需的标准内容。 - mhu

好的，那很有道理。但是你为什么要这样引用autocomplete("widget")呢？我从来没有需要这样做过。 - Theo Scholiadis

你也可以使用 $(".ui-autocomplete")，但这会针对页面上所有自动完成元素进行操作，而不仅仅是附加到 input 上的那个。 - mhu

如果您在Colorbox中遇到自动完成问题，请使用以下代码： autoComplete.insertAfter($('#cboxLoadedContent').parent()); - low_rents