jQuery的自动完成下拉列表不显示后升级到jQuery UI的1.10.3 [英] jQuery's Autocomplete dropdown is not showing after upgrade to jQuery UI 1.10.3

问题描述

在我的Ruby on Rails应用程序，我使用jQuery UI 1.9.2（通过的jQuery-UI-轨）。我被填充它的使用Ajax和JSON下拉意见箱模态对话框的形式有一个自动完成场。它的工作正常，显示我正确的建议。

In my Ruby on Rails app I was using jQuery UI 1.9.2 (through jquery-ui-rails). I had an Autocomplete field in a Modal Dialog form that was populating it's dropdown suggestion box using Ajax and Json. It worked correctly, showing me the correct suggestions.

我后来升级到jQuery UI的1.10.3（使用捆绑更新），现在自动完成下拉意见箱不再工作。它显示在JavaScript控制台中没有错误。事实上，它显示了返回的JSON是正确的。

I subsequently upgraded to jQuery UI 1.10.3 (using bundle update) and now the Autocomplete dropdown suggestion box is no longer working. It shows no error in the JavaScript console. In fact it shows that the Json that is returned is correct.

我曾尝试重写JS自动完成功能执行手动调用（使用自动完成的来源：$阿贾克斯{} 通话，仍然一无所获。

I have tried rewriting the autocomplete function in JS to perform the call manually (using the Autocomplete's source: $.ajax {} call and still nothing.

有人建议，我认为这个问题可能是jQuery的改变导致东西的jQuery-UI-轨宝石停止工作，但提交的错误车票对他们来说，事实证明，这是没有问题的。

It was suggested to me that the problem might be that jQuery changed something that caused the jquery-ui-rails gem to stop working, but after submitting a bug ticket to them, it turns out that that is not the problem.

任何帮助将是AP preciated。

Any help would be appreciated.

注意要回答：的

MHU的回答是正确的，你应该避免与Z指数在可能被篡改（这就是为什么我将其标记为正确）。 然而在我的情况（如自动完成的文本框是一个模式对话框）跌只会在对话框的宽度内（如果文本比更宽的显示的下降，这是隐藏的，你不能使用滚动条）。因为我不希望出现这种情况，我做了我在我的回答说明下方，它的工作原理。我没有作出各种评论和说明对自己，以确保任何jQueryUI的更新后仍然有效。

NOTE to Answers:
mhu's answer is correct, and you should avoid tampering with the z-Indexes where possible (which is why I marked it as correct). However in my case (where the Autocomplete text box is in a Modal Dialog) the drop down will only be displayed within the width of the dialog box (if the text is wider than that, it is hidden and you cannot use the scrollbar). As I did not want that, I did what I described in my answer below and it works. I did make various comments and notes to myself to make sure it still works after any jQueryUI update.

推荐答案

在使用jQuery UI 1.10，你不应该惹周围的Z-指数（的 http://jqueryui.com/upgrade-guide/1.10/#re​​moved-stack-option ）。只要确保自动完成元素是用正确的DOM顺序：自动完成的.insertAfter（对话框的.parent（））

When using jQuery UI 1.10, you should not mess around with z-indexes (http://jqueryui.com/upgrade-guide/1.10/#removed-stack-option). Just make sure the autocomplete element is in the correct DOM order with: 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());

这篇关于jQuery的自动完成下拉列表不显示后升级到jQuery UI的1.10.3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！