升级到jQuery UI 1.10.3后,jQuery的自动完成下拉列表未显示

前端之家收集整理的这篇文章主要介绍了升级到jQuery UI 1.10.3后,jQuery的自动完成下拉列表未显示前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在我的 Ruby on Rails应用程序中,我使用的是jQuery UI 1.9.2(通过jquery-ui-rails).我在Modal对话框表单中有一个Autocomplete字段,它使用Ajax和Json填充它的下拉列表建议框.它工作正常,向我显示正确的建议.

我随后升级到jQuery UI 1.10.3(使用捆绑更新),现在自动完成下拉列表建议框不再有效.它在JavaScript控制台中没有显示错误.实际上它表明返回的Json是正确的.

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

有人向我建议,问题可能是jQuery改变了导致jquery-ui-rails gem停止工作的东西,但是在向他们提交bug ticket之后,事实证明这不是问题.

任何帮助,将不胜感激.

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

解决方法

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

猜你在找的jQuery相关文章