Bagaimana cara menggunakan Select2 dengan JSON melalui permintaan Ajax?

90

Select2 3.4.5 saya tidak berfungsi dengan data JSON.

Inilah kotak input saya di HTML:

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

… Dan JavaScript saya

$(".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;
    }
});

Saya membuat API dengan Laravel 4 yang mengembalikan nilai setiap kali saya mengetik apa pun di kotak teks saya.

Inilah hasilnya jika saya mengetik "test" di kotak teks saya:

[{"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}]

Saya tidak dapat menambahkan hasil ke dropdown Select2 saya. Saya pikir formatSelectiondan formatResultmenyebabkan masalah karena saya tidak tahu parameter apa yang harus ditempatkan di atasnya. Saya tidak tahu di mana mendapatkan parameter seperti container, object dan query dan nilai yang harus dikembalikan, atau apakah respon JSON saya salah?

melvnberd.dll
sumber

Jawaban:

111

Di sini Anda punya contoh

$("#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
                    }
                })
            };
        }
    }
});

Cukup mudah

Tolo Palmer
sumber
2
Terima kasih atas saran untuk $ .map
tacos_tacos_tacos
Bisakah Anda menjelaskan parameter "siput"?
IcedDante
item adalah objek dengan properti completeName, slug dan id. Ini hanya contoh, salin dan tempel.
Tolo Palmer
2
Siput itu adalah properti sebenarnya dari item, item Anda, saya menambahkan ini karena Anda dapat melihat cara menambahkan parameter tambahan;)
Tolo Palmer
4
Saya menerima kesalahan ini jquery.min.js: 2 Uncaught TypeError: Tidak dapat membaca properti 'length' dari null ketika server saya tidak mengembalikan hasil.
Soptareanu Alex
109

untuk select2 v4.0.0 sedikit berbeda

$(".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
                    }
                })
            };
        }
    }
});
ikan pedang
sumber
8
Tidak bisa membuat ini bekerja ... :( Tidak ada panggilan yang dilakukan ke server.
Simanas
Itu berhasil berkat, kesalahan yang saya buat tidak memetakan dengan benar iddan textnilai-nilai kunci.
Ja8zyjits
18

Di Versi 4.0.2 sedikit berbeda Hanya di dalam processResultsdan di result:

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

Anda harus menambahkan data.itemsdi result. itemsadalah nama Json:

{
  "items": [
    {"id": 1,"name": "Tetris","full_name": "s9xie/hed"},
    {"id": 2,"name": "Tetrisf","full_name": "s9xie/hed"}
  ]
}
Ebad ghafoory
sumber
1
Jika saya menghapus itemsdari data.itemssaya tidak perlu menambahkan itemsatribut pada respons, kan? ;)
Yana Agun Siswanto
1
@bekicot ya, Anda tinggal menentukan $.map(data, function (item) apakah json Anda adalah sebuah array:[ {"id": 1,"text": "One"}, {"id": 2,"text": "Two"} ]
Tantowi Mustofa
2
Telah membenturkan kepalaku ke dinding dan ini membereskan segalanya. Terima kasih, dokumentasi untuk select2 sangat kurang.
Neil B.
11

Di sini saya berikan contoh saya yang berisi -> Bendera Negara, Kota, Negara Bagian, Negara.

Ini keluaran saya.

masukkan deskripsi gambar di sini

Lampirkan kedua Cdn js atau tautan ini.

<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 script

//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
                    }
                })
            };
        }

    }
});

Tanggapan JSON yang diharapkan.

[
   {
      "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",

         }
      }
   },

]
Dilip Hirapara
sumber
tapi saya bingung di `data: function (term) {return {term: term}; }, `
Vikas Katariya
6

Ini adalah bagaimana saya memperbaiki masalah saya, saya mendapatkan data dalam variabel data dan dengan menggunakan solusi di atas saya mendapatkan kesalahan could not load results. Saya harus mengurai hasil secara berbeda dalam processResults.

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
        });
Chaudhry Waqas
sumber
1

Masalahnya mungkin disebabkan oleh pemetaan yang salah. Anda yakin hasil Anda sudah disetel di "data"? Dalam contoh saya, kode backend mengembalikan hasil di bawah kunci "item", jadi pemetaannya akan terlihat seperti:

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

dan tidak:

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

Ajax saya tidak pernah dipecat sampai saya membungkus semuanya

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

Saya menggunakannya di bagian Vue yang terpasang. itu membutuhkan lebih banyak waktu.

Apit John Ismail
sumber
0

Jika permintaan ajax tidak diaktifkan, periksa kelas select2 di elemen pilih. Menghapus kelas select2 akan memperbaiki masalah itu.

sudin
sumber