Select2 errors - no response

Question

I'm using Select2 to provide dynamic select functionality on my page.

Here is the code:-

$("#Spon_Index").select2({
    placeholder: "Type to select a sponsor",
    minimumInputLength: 3,
    multiple: false,
    width: 400,
    ajax: {
        url: "../control/autocomplete_sponsor.aspx",
        data: function(term) {
            return term;
        },
        results: function(data, page) {
            alert(results);
            return {
                results: data
            }
        },
        formatResult: function(data) {
            return data.text;
        },
        formatSelection: function(data) {
            return data.id;
        },
        escapeMarkup: function(m) {
            return m;
        }
    }
});

Using Fiddler, I can see that I'm getting the correct return from autocomplete_sponsor.aspx, example:-

[{"id":"12","text":"Smiths"},{"id":"118","text":"Dr Smiths"}]

However, nothing is happening with the control at all. It either hangs on 'Searching', or nothing...I've checked the developer tools and there is an error:-

Uncaught TypeError: Cannot read property 'slice' of undefined

I've looked at some other solutions on SO, and tried various refactorings of my code to get this to work but I've now officially run out of ideas....hoping it's something really simple I've missed out.

Salome

If you can include the traceback for that error, it might provide some insight into what the problem is. – Chian

Just remove placeholder option in select2 and add it to your select input – Headmaster

Answer 1

Select2 just seems to need a Javascript object instead of a JSON string. The below code is for select2 v4.0.3, so results was replaced by processResults.

$("#Spon_Index").select2({
    placeholder: "Type to select a sponsor",
    minimumInputLength: 3,
    multiple: false,
    width: 400,
    ajax: {
        url: "../control/autocomplete_sponsor.aspx",
        data: function(term) {
            return term;
        },
        processResults: function(data, page) {
            return { results: JSON.parse(data) };
        },
    }
});

Typify

Answer 2

For Uncaught TypeError: Cannot read property 'slice' of undefined Error, I removed placeholder option in select2 and set it to my select input. so the code is:

$("#Spon_Index").select2({
    minimumInputLength: 3,
    multiple: false,
    width: 400,
    ajax: {
        url: "../control/autocomplete_sponsor.aspx",
        dataType: 'json',
        data: function(term) {
            return term;
        },
        results: function(data) {
            return {
                results: data
            }
        }
    }
});

Headmaster

you can set it on your select input, not in jQuery code. <select placeholder="placeholder text"></select> – Headmaster

I'm using it in react which means I don't have HTML tag but a component. – Concealment

Answer 3

Im my case when i got this error it was because the ajax was being requested even after I got to the last page, solved it by correcting my processResults function to return more: false property at the last page:

 return {
          results: [some data from my API...],
          pagination: {
            more: false, // if all data has been returned
          },
        }

Lucan

Answer 4

try delete

placeholder: "Type to select a sponsor",

Leakey

It's the same as stated in the comment by angela.mirjalili last year – Suttle

Answer 5

Only and prompt solution for me: https://github.com/select2/select2/issues/2950#issuecomment-70927064

... you are not returning an object with the key results

So, if you can modify the api (the backend is yours), the most easy way, send back your data like this:

{
    results: [
        {
            id: 5,
            text: 'something'
        },
        {
            ...
        }
    ]
}

... anyway transform your data on js side, based on this: https://select2.org/data-sources/ajax#transforming-response-data

... however @Kevin Dimey's answer with the processResults option not working for me (and no other from the answers)

Monandrous

Answer 6

removing placeholder solved the issue for me

Rohrer