我正在使用 Scripatculous 自动完成器 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});
};
首先,即使我明确将答案列表的位置样式设置为相对或绝对,警报函数始终返回空字符串。其次,即使脚本明确地使位置绝对并定位元素,但最终位置是不正确的!我是唯一经历过这种事的人吗?我在linux和windows上尝试了很多版本的chrome和firefox。我一定做错了什么。当然,我可以通过注释掉这部分代码并使用绝对定位来定位 div 元素来解决该问题。但我不想这样做......
最佳答案
在遇到同样的问题后,我找到了解决方案并在 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];
}
关于autocomplete - 脚本自动完成结果列表位置问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7094249/