2

替代文字

我正在使用自动完成 YUI 功能。但是，如您所见，当我在文本输入前面放置标签时，我无法将建议下拉菜单与文本输入对齐。我完全按照这里的示例，除了这段代码，我只是用表单中的标签元素替换 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 的解决方案。

4

4 回答 4

8

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

于 2009-02-10T23:02:15.477 回答
0

似乎这个自动完成插件没有使用 quirksmode 臭名昭著的元素位置技术来查找页面上元素的真实位置。

标签是否需要与输入框内联？<br>您可以通过在之后放置 a 或在元素上label实际设置 a来很好地解决此问题。margin-left<div id="myContainer">

否则，您可能应该将此作为错误提交，并告诉他们使用 quirksmode 方式来执行此操作（它是跨浏览器）。

于 2009-02-10T19:03:48.640 回答
0

这不是错误，只是特定设计所需的简单定制。

如果您不使用 url 添加这些 js 文件，您只需要找到生成 table/div 的 js 代码来填充您的结果。代码要么即时生成整个表格，要么将已经隐藏的 table/div 的可见性设置为“可见”。如果您找到该代码，您只需要添加一个属性来设置其左侧位置以匹配其“px”位置与您的文本框。

或者找到哪个 css 类应用于该结果容器，并尝试将其设置为左侧和绝对位置。

于 2009-02-10T22:24:18.203 回答
0

我有同样的问题...

我想要一个内联 YUI 自动完成功能，这样我就可以放置一个标签，然后放置一个带有自动完成功能的文本框，而无需换行。我找到了答案：http ://starikovs.com/2009/11/04/inline-yui-autocomplete-layout/ 。这是一个 CSS 解决方案，没有 JavaScript。

于 2009-11-04T11:42:37.367 回答