1

次のコードは、都市のオートコンプリートを実行し、関連付けられた州を選択します。Id: City と State の規則に従えばうまくいきます。1 つのページに異なる ID を持つ複数の都市/州のコントロールがある状況に遭遇しています。

誰かがこのコードをより一般的なものにリファクタリングするのを手伝ってくれませんか?

ありがとう

    $("#City").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "http://ws.geonames.org/searchJSON?country=US",
            dataType: "jsonp",
            data: {
                featureClass: "P",
                style: "full",
                maxRows: 12,
                name_startsWith: request.term
            },
            success: function (data) {
                response($.map(data.geonames, function (item) {
                    return {
                        label: item.name + (item.adminName1 ? ", " + item.adminName1 : ""),
                        value: item.name,
                        code: item.adminCode1
                    }
                }));
            }
        });
    },
    minLength: 2,
    select: function (event, ui) {
        $("#State").val(ui.item.code);
    }
});
4

1 に答える 1

1

あなたの問題は、1 つ#Cityがオートコンプリートされたときに、#Statesその 1 つの選択に対するすべての更新が行われることです。これは、HTML ルールに違反したことが原因の 1 つです。ID は一意である必要があります。

したがって、次のことをお勧めします。

  1. ID を一意にし、できれば ID の目的に合った名前を付けます (id="homecity"などid="vacationcity")。

  2. バインド先の都市と州の入力にクラスを追加します。

  3. readonlyまだ入力していない場合は、状態入力を作成することを検討してください。これにより、ユーザーはそこに入力してはならないことを認識し、UI イベントと対話を防ぐことができます。オートコンプリート プラグインを妨害しないことを願っています。

  4. 都市のマークアップに属性を追加して、変更する州の入力を示します。

どうやらリストの真ん中にコードサンプルを置くことができないので、すべてを結び付けます...

HTML:

<input id="homecity" class="autocomplete-city" stateid="homestate"></input>
<input id="homestate" class="autocomplete-state" readonly="readonly"></input>

Javascript:

    $(".autocomplete-city").autocomplete({
    source: function (request, response) {
        $.ajax({
            // your normal ajax stuff
        });
    },
    minLength: 2,
    select: function (event, ui) {
        // Updated. 'this' is captured in the closure for the function here
        // and it is set to the dom element for the input. So $() turns it
        // into a jQuery object from which we can get the stateid attr
        $("#"+$(this).attr('stateid')).val(ui.item.code);
    }
});

そしてビオラ！各入力は一般的に、制御する状態に関連付けられています。競合する ID や爆発するイベント ハンドラーはもうありません。

マークアップを非標準の属性で汚染したくない場合は、jQuery dataを使用してこれを行うこともできます (これstateid="homestate"は、html セクションのことを意味します)。

編集：この次の段落の説明は間違っています。

docs によると、select関数でui.itemは、オートコンプリートされた入力の jQuery 要素であるため、正しい値である必要が#homecityあり、attr呼び出しは正しい値を返す必要があります#homestate(例を維持)。しかし、私はそれを試していないので、null および/または未定義のチェックをそこに入れたいと思うかもしれません。

編集:ui.item関数に渡されるパラメーターは、入力要素のselectjQuery オブジェクトではなく、メニューから選択された項目です。ui次の構造があります。

Object {item: Object}
  item: Object
    code: "AK"
    label: "Jeuno, Alaska"
    value: "Jeuno"

更新する状態の属性を取得する正しい方法は fromthisで、関数のクロージャーでselect入力の DOM 要素としてキャプチャされます。その上で jQuery 関数を実行すると、または$(this)を取得できる jQuery オブジェクトが取得されます。attr()data()

複数のオートコンプリートを含む JSFiddle: http://jsfiddle.net/KBVxK/1/

于 2012-12-06T04:02:32.680 に答える