带有滚动条 z-index 帮助的 jQuery UI 自动完成

Question

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

有什么建议吗？

编辑：

这纯粹是 IE6 的错误。

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

Answer 1

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

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

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

Answer 2

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

Answer 3

您可以将offsetHeight更改为scrollHeight，就​​像Siggen所说，但是当自动完成仅返回1个结果时，我遇到了问题。第 1 个结果被压缩到一个仅 2 px 高的窗口中。
不过我找到了解决方法。
当 data.length<2 时，您应该使用 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))+';'

看一下 max 函数。现在没有滚动条了（列表也更短，列表也更长）

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