Ajax isteği aracılığıyla JSON ile Select2 nasıl kullanılır?

Benim Select2 3.4.5 JSON verilerle çalışmıyor.

İşte HTML'deki giriş kutum:

<input class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' />

… Ve JavaScript'im

$(".itemSearch").select2({
    placeholder: "Search for an Item",
    minimumInputLength: 2,
    ajax: {
        url: "/api/productSearch",
        dataType: 'json',
        quietMillis: 100,
        data: function (term, page) {
            return {
                option: term
            };
        },
        results: function (data, page) {
            var more = (page * 10) < data.total;
            return {
                results: data.itemName,
                more: more
            };
        }
    },
    formatResult: function (data, term) {
        return data;
    },
    formatSelection: function (data) {
        return data;
    },
    dropdownCssClass: "bigdrop",
    escapeMarkup: function (m) {
        return m;
    }
});

Laravel 4 ile metin kutuma herhangi bir şey yazdığımda bir değer döndüren bir API yaptım.

Metin kutuma "test" yazarsam sonuç şu şekildedir:

[{"itemName":"Test item no. 1","id":5},
{"itemName":"Test item no. 2","id":6},
{"itemName":"Test item no. 3","id":7},
{"itemName":"Test item no. 4","id":8},
{"itemName":"Test item no. 5","id":9},
{"itemName":"Test item no. 6","id":10},
{"itemName":"Test item no. 7","id":11}]

Sonucu Select2 açılır listeme ekleyemiyorum. Sanırım formatSelectionve formatResultsoruna neden oluyorum çünkü üzerine hangi parametrenin yerleştirilmesi gerektiğini bilmiyorum. Kap, nesne ve sorgu gibi bu parametreleri ve döndürmesi gereken değerleri nereden alacağımı bilmiyorum veya JSON yanıtım yanlış mı?

İşte bir örnek var

$("#profiles-thread").select2({
    minimumInputLength: 2,
    tags: [],
    ajax: {
        url: URL,
        dataType: 'json',
        type: "GET",
        quietMillis: 50,
        data: function (term) {
            return {
                term: term
            };
        },
        results: function (data) {
            return {
                results: $.map(data, function (item) {
                    return {
                        text: item.completeName,
                        slug: item.slug,
                        id: item.id
                    }
                })
            };
        }
    }
});

Oldukça kolay

için Select2 v4.0.0 biraz farklı

$(".itemSearch").select2({
    tags: true,
    multiple: true,
    tokenSeparators: [',', ' '],
    minimumInputLength: 2,
    minimumResultsForSearch: 10,
    ajax: {
        url: URL,
        dataType: "json",
        type: "GET",
        data: function (params) {

            var queryParameters = {
                term: params.term
            }
            return queryParameters;
        },
        processResults: function (data) {
            return {
                results: $.map(data, function (item) {
                    return {
                        text: item.tag_value,
                        id: item.tag_id
                    }
                })
            };
        }
    }
});

Sürüm 4.0.2'de biraz farklı Sadece içinde processResultsve içinde result:

    processResults: function (data) {
        return {
            results: $.map(data.items, function (item) {
                return {
                    text: item.tag_value,
                    id: item.tag_id
                }
            })
        };
    }

Sen eklemelisiniz data.itemsiçinde result. itemsJson adı:

{
  "items": [
    {"id": 1,"name": "Tetris","full_name": "s9xie/hed"},
    {"id": 2,"name": "Tetrisf","full_name": "s9xie/hed"}
  ]
}

Burada size -> Ülke bayrağı, Şehir, Eyalet, Ülke içeren örneğimi veriyorum .

İşte çıktım.

Bu iki Cdn js veya bağlantısını ekleyin.

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>

js komut dosyası

//for apend flag of country.

function formatState (state) {
    console.log(state);
    if (!state.id) {
      return state.text;
    }
    var baseUrl = "admin/images/flags";
    var $state = $(
      '<span><img src="'+baseUrl+ '/' + state.contryflage.toLowerCase() + '.png"  class="img-flag" /> ' +state.text+ '</span>'
    );
    return $state;
  };


$(function(){
    $("#itemSearch").select2({
    minimumInputLength: 2,
    templateResult: formatState, //this is for append country flag.
    ajax: {
        url: URL,
        dataType: 'json',
        type: "POST",
        data: function (term) {
            return {
                term: term
            };
        },
        processResults: function (data) {
            return {
                results: $.map(data, function (item) {
                    return {
                        text: item.name+', '+item.state.name+', '+item.state.coutry.name,
                        id: item.id,
                        contryflage:item.state.coutry.sortname
                    }
                })
            };
        }

    }
});

JSON yanıtı bekleniyor.

[
   {
      "id":7570,
      "name":"Brussels",
      "state":{
         "name":"Brabant",
         "coutry":{
            "sortname":"BE",
            "name":"Belgium",

         }
      }
   },
   {
      "id":7575,
      "name":"Brussels",
      "state":{
         "name":"Brabant Wallon",
         "coutry":{
            "sortname":"BE",
            "name":"Belgium",

         }
      }
   },
   {
      "id":7578,
      "name":"Brussel",
      "state":{
         "name":"Brussel",
         "coutry":{
            "sortname":"BE",
            "name":"Belgium",

         }
      }
   },

]

Sorunumu bu şekilde çözdüm, veri değişkeninde veri alıyorum ve yukarıdaki çözümleri kullanarak hata alıyordum could not load results. ProcessResults'da sonuçları farklı şekilde ayrıştırmam gerekti.

searchBar.select2({
            ajax: {
                url: "/search/live/results/",
                dataType: 'json',
                headers : {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                delay: 250,
                type: 'GET',
                data: function (params) {
                    return {
                        q: params.term, // search term
                    };
                },
                processResults: function (data) {
                    var arr = []
                    $.each(data, function (index, value) {
                        arr.push({
                            id: index,
                            text: value
                        })
                    })
                    return {
                        results: arr
                    };
                },
                cache: true
            },
            escapeMarkup: function (markup) { return markup; },
            minimumInputLength: 1
        });

Sorunların nedeni yanlış haritalama olabilir. Sonuç setinizin "veriler" içinde olduğundan emin misiniz? Örneğimde, arka uç kodu sonuçları "öğeler" anahtarı altında döndürdüğünden eşleme şöyle görünmelidir:

results: $.map(data.items, function (item) {
....
}

ve yok:

 results: $.map(data, function (item) {
    ....
    }

Ajax'ım her şeyi sarana kadar asla kovulmadı.

setTimeout(function(){ .... }, 3000);

Vue'nun monte edilmiş bölümünde kullanıyordum. daha fazla zamana ihtiyacı var.

Ajax isteği çalıştırılmazsa, lütfen select öğesindeki select2 sınıfını kontrol edin. Select2 sınıfının kaldırılması bu sorunu çözecektir.