14

以下は、appendToAJAX ソースを使用して jQuery オートコンプリートを使用するための私の試みです。

複数の質問がありますが、AJAX ソースを使用してオートコンプリートを実装する正しい方法を理解するのに苦労している他の多くの人に役立つことを願っています。

1)source: function(request, response) {...} これは何をしますか? なぜそれが必要なのですか。

2)function(data){ response($.map (data, function(obj) {データはどのような形式で返されますか? データが JSON 形式であることは認識していますが、そのポイントは.map何ですか? これを行う必要がありますか？メリットはありますか？

3a) と を使用する場合appendTo、renderItem上記のsuccessデータを返す必要がありますか?

3b) または、上記のデータに応じて、appendTo と renderItem をどのように正しく使用して、取得した値の書式設定と表示を変更しますか?

$(function() {
$( ".find_group_ac" ).autocomplete({
        minLength: 1,
        source: function(request, response) {
            $.ajax({
                url: "welcome/search/",
                data: { term: $(".find_group_ac").val()},
                dataType: "json",
                type: "POST",
                success: function(data){ response($.map
                        (data, function(obj) {
                            return {
                            label: obj.name + ': ' + obj.description,
                            value: obj.name,
                            id: obj.name
                };}));}
            });
        }
    }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
                .appendTo( ul );
        };
});

これは答えるのが大変に思えるかもしれませんが、多くの JavaScript 初心者にとって、そして確かに私自身にとって価値があると確信しています。

4

1 に答える 1

33

source: function(request, response) {...}これは何をしますか？なぜそれが必要なのですか。

データを取得するためにカスタム AJAX POST を実行しているためresponse、目的のオートコンプリート候補でコールバックを呼び出す関数を指定する必要があります。

最も単純な使用例では、パラメータに文字列を指定するだけsourceで、ウィジェットはその URL に対して GET リクエストを発行し、?term=(term). POST を実行して別の用語を送信しているため、 の関数バージョンを使用する必要がありますsource。

PS：代わりに$.ajax呼び出しを提供する必要がありますrequest.term$(".find_group_ac").val()

function(data){ response($.map (data, function(obj) {) はどのような形式でデータを返しますか?データが JSON 形式であることは認識していますが、.map のポイントは何ですか?これを行う必要がありますか? ? 特典はありますか?

オートコンプリート ウィジェットは、項目が次の要件のいずれかを満たす配列データ ソースを想定しています。

  1. アイテムは単一の文字列である必要があります。または:
  2. label項目は、プロパティ、value、プロパティ、またはその両方を持つオブジェクトである必要があります。

これを念頭に置いて、JSON がこのようにフォーマットされていないサーバー側リソースを使用している場合は、関数に提供する前に、それらの仕様を満たすようにデータを変換する必要がありresponseます。これを行う一般的な方法は$.map、配列を反復処理して各要素を変換する を使用することです。

appendToとを使用する場合renderItem、上記の成功データを返す必要がありますか?

いいえ、しかししばしば一緒に使われます。

description候補リストに表示したい追加のプロパティ ( など) があるとします。この場合、サーバー側の結果をオートコンプリートが期待する形式に変換することができますが ( を含めlabel、valueただし も含めますdescription)、プロパティも表示する必要がありdescriptionます。この場合、オーバーロードする必要があります_renderItem。

または、上記のデータに応じて、appendTo と renderItem を正しく使用して、取得した値の書式設定と表示を変更するにはどうすればよいでしょうか?

上記の質問がこの回答で適切に回答されている場合、私がする必要があるのは、概念をまとめたコードを投稿することだけです。

$( ".find_group_ac" ).autocomplete({
    minLength: 1,
    source: function(request, response) {
        $.ajax({
            url: "welcome/search/",
            data: { term: $(".find_group_ac").val()},
            dataType: "json",
            type: "POST",
            success: function(data) { 
                response($.map(data, function(obj) {
                    return {
                        label: obj.name,
                        value: obj.name,
                        description: obj.description,
                        id: obj.name // don't really need this unless you're using it elsewhere.
                    };
                }));
            }

        });
    }
}).data( "autocomplete" )._renderItem = function( ul, item ) {
    // Inside of _renderItem you can use any property that exists on each item that we built
    // with $.map above */
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<a>" + item.label + "<br>" + item.description + "</a>")
        .appendTo(ul);
};

オートコンプリートに関する jQueryUI のドキュメント ページの例は、実際には非常に広範であり、役立つ可能性があります。具体的には、次の点を確認してください。

于 2012-07-30T21:38:53.910 に答える