Scriptaculous autocompleter結果列表位置問題

我正在使用Scripatculous Autocompleter 1.9.0。我的問題是Chrome和Firefox中結果列表div的位置不正確，但在IE中可用。結果列表div顯示在文本框的頂部。我能夠修改controls.js並修復問題，但我想知道如果我在樣式表中做錯了什麼。這是我的代碼：Scriptaculous autocompleter結果列表位置問題

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>

我試圖un-nesting div和所有元素的「位置」選項的許多其他變化。沒有工作。

然後，我開始與controls.js Autocompleter.create功能發揮和昂秀功能：

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元素來解決問題。但我不喜歡這樣做...

來源

2011-08-17 kounoupis

有同樣的問題掙扎後，我找到了解決辦法，並在https://prototype.lighthouseapp.com/projects/8886/tickets/1286-error-in-elementcloneposition#ticket-1286-1

的修復程序有描述開了罰單，但基本上，Element.clonePosition具有以下：

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

來源

2011-11-29 11:07:15

非常感謝你：

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

這必須被替換。我有同樣的問題，並修復了這個問題。 – makriria

Scriptaculous autocompleter結果列表位置問題

回答

相關問題