7

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

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

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

有人向我建议，问题可能是 jQuery 更改了一些导致jquery-ui-railsgem 停止工作的东西，但是在向他们提交了bug 票之后，事实证明这不是问题所在。

任何帮助，将不胜感激。

答案注释：
mhu 的答案是正确的，您应该尽可能避免篡改 z-Indexes（这就是我将其标记为正确的原因）。但是在我的情况下（自动完成文本框位于模态对话框中），下拉菜单只会显示在对话框的宽度内（如果文本比这宽，它会被隐藏并且您不能使用滚动条）。因为我不希望那样，所以我做了我在下面的回答中描述的事情并且它有效。我确实对自己做了各种评论和注释，以确保它在任何 jQueryUI 更新后仍然有效。

4

2 回答 2

8

在到处搜索此问题后，我发现没有人可以解决我的问题，因为我无法生成任何错误消息并且我显示的代码是正确的。在有人建议我阅读 jQuery 更改日志（我承认我没有）之后，我发现了 jQuery 中的错误以及解决方法：

在jQuery UI 1.10.1 changelog的 Autocomplete 部分下，它显示：

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 票证，所以我希望它会被 1.10.4 处理，这样就不再需要解决方法了。

我希望这对其他人也有帮助。

于 2013-06-12T10:00:23.063 回答
3

使用 jQuery UI 1.10 时，您不应该乱用 z-indexes ( http://jqueryui.com/upgrade-guide/1.10/#re​​moved -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());
于 2013-06-18T21:20:07.527 回答