1

Select2 JS バージョン 4.0.0-rc.1 を使用していますが、リモート Ajax メソッドで提案を読み込むのに問題があります。

以下はマークアップとコードです

<select class="form-control input-sm" id="selFrame1" name="selFrame1">
   <option> Select Frame </option>
</select>

JavaScript Jquery

$('#selFrame1').select2({
        ajax: {
          url: siteUrl+"suggest/frames",
          dataType: 'json',
          delay: 250,
          method:'POST',
          data: function (params) {
            return {
            q: params.term, // search term
            page: params.page
            };
         },
         processResults: function (data, page) {
         // parse the results into the format expected by Select2.
         // since we are using custom formatting functions we do not need to
         // alter the remote JSON data

           return {
             results: data.result
           };
          },
         cache: true
        }
});

サーバーから返された Json Result

{results: [{"Code":"123360000"},{"Code":"123360358"},{"Code":"123364000"},{"Code":"123400000"}], more: false }

提案を表示するために特定の関数を記述する必要があるかどうかはまったくわかりません。Ajax セクションのコメントには、結果の Json データを変更すべきではないと書かれています。

ここで、提案を表示するためにコードを機能させるには、さらに何をすべきか教えてください。

select2の新しいバージョンでは、多くのものが変更されたと思います。

4

2 に答える 2

3

あなたの応答は Select2 3.x 応答として返されていますが、これは問題ありません。processResultsこのため (以前は ) メソッドを提供していたresultsので、クライアント側で応答を変更できます。

あなたの場合、応答にはresultsキーが含まれていますが、processResponse関数はresult存在しないキーを参照しています。のようなものに変更すると

processResults: function (data, page) {
// parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to
// alter the remote JSON data

  return {
    results: data.results,
    pagination: {
      more: data.more
    }
  };
},

その後、物事が機能し始めるはずです。これにより、応答の既存のmoreプロパティもpagination、Select2 4.0 に移行した新しいキーにマップされます。

于 2015-03-12T23:14:25.413 に答える
1

Json 応答は次のようにする必要があります。

{
  "total_count":2,
  "items": [
    {"id":"01", "name":"item 1"},
    {"id":"02", "name":"item 2"}
  ]
}

機能するには、id プロパティが必要です。

ここに私の設定があります:

function formatRepo (repo) {
    if (repo.loading) return repo.text;

    var markup = "<div class='select2-result-repository clearfix'><div class='select2-result-repository__img'><img src='" + repo.img + "' width='80' height='80' /></div><div class='select2-result-repository__meta'><div class='select2-result-repository__title'>" + repo.full_name + "</div>";

    markup += "<div class='select2-result-repository__statistics'><div class='select2-result-repository__type'><i class='fa fa-flash'></i> Type : " + repo.type + "</div><div class='select2-result-repository__usecase'><i class='fa fa-eye'></i> Use case : " + repo.usecase + "</div></div></div></div>";

    return markup;
}

function formatRepoSelection (repo) {
    return repo.full_name;
}

// Init select2
$(".select2").select2({
    ajax: {
        type    : "GET",
        url     : "{{ path('tag_search_js') }}",
        dataType: 'json',
        delay   : 250,
        data    : function (params) {
            return {
                q: params.term, // search term
                page: params.page
            };
        },
        processResults: function (data, params) {
            params.page = params.page || 1;

            return {
                results: data.items,
                pagination: {
                    more: (params.page * 30) < data.total_count
                }
            };
        },
        cache: true
    },
    placeholder: "Select a tag",
    escapeMarkup: function (markup) { return markup; },
    minimumInputLength: 1,
    templateResult: formatRepo,
    templateSelection: formatRepoSelection
});

お役に立てれば ！

于 2016-08-03T11:52:31.457 に答える