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 formatSelection
dan formatResult
menyebabkan 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?
javascript
json
laravel
jquery-select2
melvnberd.dll
sumber
sumber
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 } }) }; } } });
sumber
id
dantext
nilai-nilai kunci.Di Versi 4.0.2 sedikit berbeda Hanya di dalam
processResults
dan diresult
:processResults: function (data) { return { results: $.map(data.items, function (item) { return { text: item.tag_value, id: item.tag_id } }) }; }
Anda harus menambahkan
data.items
diresult
.items
adalah nama Json:{ "items": [ {"id": 1,"name": "Tetris","full_name": "s9xie/hed"}, {"id": 2,"name": "Tetrisf","full_name": "s9xie/hed"} ] }
sumber
items
daridata.items
saya tidak perlu menambahkanitems
atribut pada respons, kan? ;)$.map(data, function (item)
apakah json Anda adalah sebuah array:[ {"id": 1,"text": "One"}, {"id": 2,"text": "Two"} ]
Di sini saya berikan contoh saya yang berisi -> Bendera Negara, Kota, Negara Bagian, Negara.
Ini keluaran saya.
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", } } }, ]
sumber
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 });
sumber
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) { .... }
sumber
Ajax saya tidak pernah dipecat sampai saya membungkus semuanya
setTimeout(function(){ .... }, 3000);
Saya menggunakannya di bagian Vue yang terpasang. itu membutuhkan lebih banyak waktu.
sumber
Jika permintaan ajax tidak diaktifkan, periksa kelas select2 di elemen pilih. Menghapus kelas select2 akan memperbaiki masalah itu.
sumber