javascript - YUI自动完成错位问题

Question

我正在使用自动完成 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 的解决方案。

Answer 1

AutoComplete 不会在每次显示 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