升级到 jQuery UI 1.10.3 后未显示 jQuery 的自动完成下拉列表 [英] 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-rails).我在模态对话框表单中有一个自动完成字段，它使用 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(使用 bundle update)，现在自动完成下拉建议框不再工作.它在 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 中重写自动完成功能以手动执行调用(使用自动完成的 source: $.ajax {} 调用，但仍然没有.

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-rails gem 停止工作的某些内容，但是在提交了 bug 票 给他们，结果证明这不是问题.

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.

任何帮助将不胜感激.

回答注意事项:
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-indexes (http://jqueryui.com/upgrade-guide/1.10/#re​​moved-stack-option).只需确保自动完成元素的 DOM 顺序正确:autocomplete.insertAfter(dialog.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 UI 1.10.3 后未显示 jQuery 的自动完成下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！