CODEWITHSUNDEEP
phpjqueryjquery-select2
LukePOLO
LukePOLO

Reputation: 1118

Select2 AJAX Multiple not working properly

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?

Upvotes: 5

Views: 11687

Answers (1)

Aivar
Aivar

Reputation: 2029

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

Upvotes: 6

Related Questions