Scriptaculous 自动完成器结果列表位置问题

Question

我正在使用 Scripatculous Autocompleter 1.9.0。我的问题是结果列表 div 的位置在 Chrome 和 Firefox 中不正确，但在 IE 中有效。结果列表 div 显示在文本框的顶部。我能够修改 controls.js 并解决问题，但我想知道我是否对样式表做错了什么。这是我的代码：

style.css:
div#autocomplete
{
  position: relative;
}

input#query {
  width:500px;
}

div#answerlist {
  width:500px;
  max-height:700px;
  overflow-y:scroll;
  overflow-x:auto;
  border:1px solid #CCCCCC;
}

index.phtml:

<div id="webphone" style="width: 1000px">
<center>
<label>Search:</label>
<input type="text" name="query" id="query"></input>
</center>
<div id="answerlist"></div>
</div>

<script type="text/javascript">
new Ajax.Autocompleter("query","answerlist","index/search", {frequency: 0.5, minChars: 1});
</script>

我尝试为所有元素取消嵌套 div 和许多其他“位置”选项的变体。没有任何效果。

然后，我开始使用controls.js Autocompleter.create 函数和onShow 函数：

 controls.js:

 function(element, update){
    if(!update.style.position || update.style.position=='absolute') {
      /***alert(update.style.position);***/
      update.style.position = 'absolute';
      Position.clone(element, update, {
       setHeight: false,
        offsetTop: element.offsetHeight
      });
    }
    Effect.Appear(update,{duration:0.15});
  };

首先，alert 函数总是返回一个空字符串，即使我明确地将 answerlist 的位置样式设置为相对或绝对。其次，即使脚本明确将位置设为绝对位置并定位元素，最终位置也不正确！我是唯一一个遇到这种情况的人吗？我在 linux 和 windows 上尝试了许多版本的 chrome 和 firefox。我一定做错了什么。当然，我可以通过注释掉这部分代码并使用绝对定位来定位 div 元素来解决问题。但我不想那样做……

Answer 1

在遇到同样的问题后，我找到了解决方案，并在https://prototype.lighthouseapp.com/projects/8886/tickets/1286-error-in-elementcloneposition#ticket-1286-1开了一张票

那里描述了修复，但基本上，Element.clonePosition 具有以下内容：

if (parent == document.body) {
    delta[0] -= document.body.offsetLeft;
    delta[1] -= document.body.offsetTop;
}

必须替换为：

if (parent == document.body) {
    var parentOffset = Element.viewportOffset(parent);
    delta[0] -= parentOffset[0];
    delta[1] -= parentOffset[1];
}