YUI自動完成未對齊問題

我正在使用自動完成YUI功能。但是，正如您所看到的，當我在文本輸入前放置標籤時，我無法將提示下拉與文本輸入對齊。我下面the example here究竟除了這個片段的代碼，我只是在形式的標籤元素替換H3：

<div id="myAutoComplete"> 
<label>Enter a state:</label> 
    <input id="myInput" type="text"> 
    <div id="myContainer"></div> 
</div> 

<script type="text/javascript" src="http://developer.yahoo.com/yui/examples/autocomplete/assets/js/data.js"></script>

（我也不得不從相對於絕對路徑改變data.js路徑。）

建議下拉以與文本輸入保持一致的最佳方式是什麼？我想要一個適用於所有流行的現代瀏覽器（FF3，Safari，Chrome，IE）和IE6的解決方案。

來源

2009-02-10 Julien Chastang

自動完成並不會自動在每次顯示時暴露AC容器的位置，因爲除非您正在進行內聯工作，否則這是不必要的。但是，現在您已經將內嵌的輸入字段移動了，您需要採取另一步驟來對齊容器，無論是使用自定義CSS還是蠻力JS定位。

這是暴力方法。

在定義您的AC實例：

oAC.doBeforeExpandContainer = function() { 
    var Dom = YAHOO.util.Dom; 
    Dom.setXY("myContainer", [Dom.getX("myInput"), Dom.getY("myInput") + Dom.get("myInput").offsetHeight]); 
    return true; 
}

這裏有一個工作示例：

http://ericmiraglia.com/yui/demos/acalign.php

來源

2009-02-10 23:02:15

埃裏克你真棒。謝謝，這很好。出於好奇，你爲什麼說「蠻力」？不知何故，這對瀏覽器來說太累了嗎？ – 2009-02-11 06:20:51

看起來像這個自動完成的插件沒有使用臭名昭着的element position技術由quirksmode找到真實頁面上元素的位置。

標籤是否需要與輸入框內聯？你可以通過在label之後輸入<br>，或者在<div id="myContainer">元素上實際設置margin-left來解決此問題。

否則，你應該把這個文件作爲一個bug，並告訴他們使用quirksmode這樣做的方式（它是跨瀏覽器的）。

來源

2009-02-10 19:03:48

謝謝盧卡。是的，我希望將標籤內聯，並將文本輸入和建議下拉到標籤的右側。 – 2009-02-10 19:23:46

這不是一個錯誤，只是特定設計所需的簡單定製。

如果你沒有使用url來添加這些js文件，你只需要找到生成表格/ div的js代碼來填充你的結果。代碼可以是動態生成整個表格，也可以將已隱藏的表格/ div的可見性設置爲「可見」。如果您找到該代碼，則只需添加一個屬性以將其左側位置設置爲與您的文本框中的「px」位置匹配即可。

或者找到正在將css類應用於該容器的結果，並嘗試將其設置爲左側和絕對位置。

來源

2009-02-10 22:24:18 simplyharsh

我有同樣的問題...

我想要一個內嵌YUI自動完成這樣我就可以放置一個標籤，然後放置一個帶有自動完成的文本框，而不用換行符。我找到了一個答案：http://starikovs.com/2009/11/04/inline-yui-autocomplete-layout/。這是一個CSS解決方案，沒有JavaScript。

來源

2009-11-04 11:42:37 starikovs

YUI自動完成未對齊問題

回答

相關問題