使用滚动条z-index帮助的jQuery UI自动完成

Question

我有一个文本框，我正在附加jQuery UI的自动完成功能，我正在使用CSS通过示例here给它一个最大高度。我的问题是，这样做会导致bgiframe解决的z-index问题再次出现，但方式不同。初始自动完成菜单位于其下方的所有控件上方，但是当我开始滚动时，自动完成菜单会落后于它们。

有什么建议吗？

编辑：

这纯粹是IE6的错误。

如您所见，向下滚动后，自动完成功能落后于其他控件。

Answer 1

我可以通过在以下行（来自jquery.bgiframe.js）中用 scrollHeight 替换 offsetHeight 来解决问题：

height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+\'px\')':prop(s.height))+';'+

此更改解决了带有垂直滚动条的自动填充字段的错误。我无法在其他类型的对话中发现任何回归（但我没有进行大量的测试）。

Answer 2

您需要使用javascript反转表单元素（或其容器）的z-index顺序。即，“社会工作者”具有最低的“DX代码”，是最高的z指数。

Answer 3

您可以将offsetHeight更改为scrollHeight，就​​像Siggen所说，但是当自动完成返回的结果只有1时我遇到了问题。 1结果被压缩成一个只有2像素高的窗口。 我找到了解决办法。 当你有一个data.length <1时，你应该使用offsetHeight，而不是scrollHeight。

您必须修改autocomplete.js。

Locate this code:
if($.fn.bgiframe)list.bgiframe();

并且这样做：

if($.fn.bgiframe){
    if(data.length<2)
       list.bgiframe({height:'expression(this.parentNode.offsetHeight+\'px\')'});
    else 
       list.bgiframe();
}

请记住，此代码应与Siggen的修复结合使用。

Answer 4

我使用了这两个参数的组合，如下所示：

'height:'+(s.height=='auto'?'expression(Math.max(this.parentNode.offsetHeight,this.parentNode.scrollHeight)+\'px\')':prop(s.height))+';'

查看最大功能。现在很好，没有滚动条（更短的列表和更长的列表）

现在自动完成组件在IE6中看起来很完美。