2

代替テキスト

オートコンプリートYUI機能を使用しています。ただし、ご覧のとおり、テキスト入力の前にラベルを配置すると、提案ドロップダウンをテキスト入力に合わせるのに問題があります。H3を次の形式のlabel要素に置き換えるだけのこのコードスニペットを除いて、ここでの例に正確に従っています。

<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

オートコンプリートは、表示されるたびに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

私は同じ問題を抱えていました...

インライン YUI オートコンプリートが必要だったので、ラベルを配置してから改行なしでオートコンプリート付きのテキスト ボックスを配置しました。そして、私は答えを見つけました: http://starikovs.com/2009/11/04/inline-yui-autocomplete-layout/。これは CSS ソリューションであり、JavaScript はありません。

于 2009-11-04T11:42:37.367 に答える
0

これはバグではなく、特定の設計に必要な単純なカスタマイズです。

URL を使用してこれらの js ファイルを追加していない場合は、結果を入力する table/div を生成する js コードを見つけるだけで済みます。コードは、その場でテーブル全体を生成するか、すでに非表示になっている table/div の可視性を「可視」に設定します。そのコードが見つかった場合は、属性を追加して、左の位置をテキストボックスの「px」位置と一致するように設定するだけです。

または、その結果のコンテナーに適用されている css クラスを見つけて、左と絶対位置に設定してみてください。

于 2009-02-10T22:24:18.203 に答える