web-dev-qa-db-ja.com

AJAX sourceおよびappendToを使用したjQueryオートコンプリートの理解と実装

以下は、appendToをAJAX sourceでjQueryオートコンプリートで動作させるための私の試みです。

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

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初心者にとって、そして確かに私自身にとっても価値があると確信しています。

javascriptajaxjquery-uijquery-ui-autocomplete
14
Ricky Mason

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

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

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

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

Function（data）{response（$。map（data、function（obj）{はデータを返しますか？データはJSON形式であることに気付きましたが、.mapのポイントは何ですか？これを行う必要がありますか？ ？メリットはありますか？

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

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

これを念頭に置いて、JSONがこのようにフォーマットされていないnotのサーバー側リソースを使用している場合は、データを変換して満たす必要があります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のオートコンプリートのドキュメントページ の例は、実際には非常に広範囲であり、役立つ可能性があります。具体的には、必ずチェックしてください。

31
Andrew Whitaker