Select 2 "ajax results could not be loaded"

Question

Sorry, but can't find a resolve.

Whenever i try to do some searching, select2 will show 'The results could not be loaded'.

I think my ajax settings is wrong

html:

<select class="js-data-example-ajax form-control" multiple="multiple"></select>

script:

$(".js-data-example-ajax").select2({
    ajax: {
        url: '@Url.Action("LoadCity", "Addresses")',
        dataType: 'jsonp',
        delay: 250,
        data: function(params) {
            return {
                q: params.term, // search term
                page: params.page
            };
        },
        processResults: function(data) {
            return {
                results: data
            };
        },
        cache: true
    },
    minimumInputLength: 1,

});

screen

---

ADD 08.07.2016

some change ajax settings:

dataType: 'jsonp'

to

dataType: 'json'

and add

type: 'GET',

now no message 'The results could not be loaded', and no results

Answer 1

Base from you last comment. The process result should return an object that has a results key.

So it should be:

return {
   results: [{id: 1, text: 'Test'}]
}

Answer 2

I recently encountered the exact same problem using version 4.0.5

This is a known bug in the component solved starting with version 4.0.6

From Github official repository:

Fix AJAX data source error #4356

Updating my local version of the select2 component solved the issue.

Answer 3

I have this working select2, I have implemented this yesterday, It might help you.

        select2_common('.accounts','Account & Description');
        function select2_common(selector,placeholder)
        {
            $(selector).select2({
                minimumInputLength:2,
                placeholder:placeholder,
                ajax: {
                    url: "your_url_here",
                    dataType: "json",
                    delay: 200,
                    data: function (params) {
                        return {
                        q: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function (data) {
                    // console.log(data);
                    return {
                        results: $.map(data, function(obj) {
                            if(obj.id!=0){
                            // console.log(obj);
                            return { id: obj.id, text: obj.name };
                        }
                            else
                                {return {id: obj.id, text: obj.name}}
                        })
                    };

                },
                cache: true
            },
            debug:false
        });
    }


//And your result should be in this form, from your method....
//I am using laravel php framework.


public function getAccountDetail(Request $request)
{
    $q = $request->input('q');
    $result=[];
    if (isset($q) && $q != '') {
            /*----------  Search by account code or title  ----------*/
        $data = DB::table('acc_accounts')->select('acc_id','acc_code','acc_title')
        ->where('acc_code', 'like', '%' . $q . '%')
        ->orWhere('acc_title', 'like', '%' . $q . '%')
        ->limit(10)->orderBy('acc_code')->get();
          foreach ($data as $key => $value) {
            $new1 = array('id' => $value->acc_id, 'name' => $value->acc_code.' ('.$value->acc_title.')' );
            array_push($result,$new1);
          }
        print(json_encode($result));
    }
}