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自动完成未对齐问题

回答

相关问题