在其他元素之上显示 JQuery UI 自动完成建议

Question

我使用 JQuery UI 自动完成在地图控件上建议不同的城市。我通常会让其他 div 显示干扰自动完成建议的内容。 div 显示在建议的顶部。

更改这些 div 的 z-index 是有意义的，因为建议具有最低的 z-index。

选择的策略是修改建议的 z-index 以显示在顶部。这个想法是将一个处理程序附加到建议的加载事件，将 z-index 更改为最高值。由于建议在控件创建时不可用，因此必须使用 .live() 附加处理程序。我已经完成了以下操作：

$('ul.ui-autocomplete').live('load',function(){
this.css('z-index',3999);
});

问题似乎是我没有很好地附加处理程序，因为它没有被解雇。有什么想法吗？

Answer 1

我找到了一种解决方法来使其发挥作用。我不太喜欢它，因为它取决于对下拉列表的搜索时间几秒钟以“确保”它可用。您需要这个，因为当触发打开事件时，下拉列表尚未创建。如果您将以下函数注册到打开事件，

function() {
  $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
  setTimeout("$('ul.ui-autocomplete').css('z-index',3999)",500);
}

尽管这有效，但我仍在寻找确定性响应。

Answer 2

使用以下代码行的此选项：

$(".selector").autocomplete("option", "position", {my: "right top", at: "right bottom"});