升级到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-railsgem停止工作的东西,但在向他们提交bug票后,事实证明这不是问题.

任何帮助,将不胜感激.

回答注意:
mhu的答案是正确的,你应该尽可能避免篡改z索引(这就是为什么我把它标记为正确).但是在我的情况下(自动填充文本框位于模态对话框中),下拉列表将仅显示在对话框的宽度内(如果文本宽于此值,则隐藏它并且您无法使用滚动条).因为我不想那样,我做了我在下面的答案中所描述的并且它有效.我确实对自己做了各种评论和注释,以确保它在任何jQueryUI更新后仍然有效.

Answer 1

在搜索到这个问题后,我发现没有人能解决我的问题,因为我无法生成任何错误消息,而且我显示的代码是合理的.有人建议我阅读jQuery更改日志(事实上我没有),我发现了jQuery中的错误以及解决方法:

在jQuery UI 1.10.1更改日志中,在自动完成部分下面显示:

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处理,以便不再需要解决方法.

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

Answer 2

使用 jQuery UI 1.10 时，不应乱用 z 索引 ( 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());