Select2 AJAX Multiple not working properly - php

Question

So i have a select2 ajax selector that works perfectly when not using multiple , but when I use multiple it basically sometimes it works , others it doesn't.
$('#organizations').select2(
{
placeholder: "Add Organizations!",
minimumInputLength: 3,
multiple: true,
ajax: {
url: "https://boilerprojects.com/organizations/search",
dataType: 'json',
quietMillis: 100,
data: function (term, page) {
return {
q: term, // search term
page_limit: 10
};
},
results: function (data, page)
{
var more = (page * 10) < data.total;
console.log(data.results);
return { results: data.results, more: more };
},
dropdownCssClass: "bigdrop"
},
});
what returns from my PHP is : {"results":[{"id":"6","text":"LukePOLO"}]}
So im getting results its just not populating.
Anyone have any ideas?

Answer 1

If you want to use that infinite scroll option, then your response is wrong.
{"results":[{"id":"6","text":"LukePOLO"}]}
should be something like:
{"results":[{"id":"6","text":"LukePOLO"}], "total":"1"} //Total 1 result
you have key results but do not have a key for total. And in your post data function you should allso say witch page you search.
$('#organizations').select2(
{
placeholder: "Add Organizations!",
minimumInputLength: 3,
multiple: true,
ajax: {
url: "https://boilerprojects.com/organizations/search",
dataType: 'json',
quietMillis: 100,
data: function (term, page) {
return {
q: term,
page_limit: 10,
page: page //you need to send page number or your script do not know witch results to skip
};
},
results: function (data, page)
{
var more = (page * 10) < data.total;
return { results: data.results, more: more };
},
dropdownCssClass: "bigdrop"
}
});