4

以下のコードについて助けが必要です。

$("#auto_cp").autocomplete({
    minLength: 3,
    //source
    source: function(req, add) {
        $.getJSON("friends.php?callback=?", req, function(data) {
            var suggestions = [];
            $.each(data, function(i, val) {
                suggestions.push(val.name);
            });
            add(suggestions);
        });
    },
    //select
    select: function(e, ui) {
        alert(ui.item.value);
    }
});​

FireBugを使用して、コンソールでこれを取得しています：

jQuery171003666625335785867_1337116004522([{"name":"97300 Cayenne","zzz":"203"},{"name":"97311 Roura","zzz":"201"},{"name":"97312 Saint Elie) ","zzz":"388"},{"name":"97320 Saint Laurent du Maroni","zzz":"391"},{"name":"97351 Matoury","zzz":"52" },{"name":"97354 ルミール モンジョリー カイエン","zzz":"69"},{"name":"97355 Macouria Tonate","zzz":"449"}])

すべてが非常にうまく機能していますが、選択した項目で「zzz」の値を取得する方法がわかりません。

私は試した

alert(ui.item.zzz);

しかし、うまくいきません。

4

3 に答える 3

6

オートコンプリート ウィジェットは、次のいずれかの配列形式のデータ ソースを想定しています。

  • labelプロパティ、valueプロパティ、またはその両方を含むオブジェクト
  • 単純な文字列値

現在、2 番目 (文字列値の配列) を構築していますが、これは正常に動作しますが、データを反復処理してオブジェクトに他のプロパティを指定するときに、データを少し調整することもできます。

$("#auto_cp").autocomplete({
    minLength: 3,
    //source
    source: function(req, add) {
        $.getJSON("friends.php?callback=?", req, function(data) {
            var suggestions = [];
            $.each(data, function(i, val) {
                suggestions.push({
                    label: val.name,
                    zzz: val.zzz
                });
            });
            add(suggestions);
        });
    },
    //select
    select: function(e, ui) {
        alert(ui.item.zzz);
    }
});​

ここで、ウィジェットに提供している配列にはnameプロパティを持つオブジェクトが含まれているため、オートコンプリート機能を取得し、プロパティへのアクセスも取得する必要がありzzzます。

これは実際の例です(AJAX 呼び出しなし): http://jsfiddle.net/LY42X/

于 2012-05-15T22:55:23.357 に答える
2

ソース関数は名前を入力するだけです。そのデータ構造のすべてが必要な場合は、次のようにします。

$("#auto_cp").autocomplete({
    minLength: 3,
    //source
    source: function(req, add) {
        $.getJSON("friends.php?callback=?", req, function(data) {
            var suggestions = [];
            $.each(data, function(i, val) {
                suggestions.push(val); //not val.name
            });
            add(suggestions);
        });
    },
    //select
    select: function(e, ui) {
        alert(ui.item.value.zzz);
    }
});​
于 2012-05-15T21:39:58.283 に答える
0

これはオブジェクトの配列のようです...不足している可能性があるのは、「[0]」または一般に「[index]」です。

これを確認してください: jqueryui.com/demos/autocomplete/#event-select

于 2012-05-15T21:43:38.713 に答える