Select2 TypeError: b is undefined

Question

I'm using select2 to show ajax results in a dropdown but when I append data to select2 its showing error

TypeError: b is undefined

JS Code

        var baseurl = $("#baseurl").val();
        $(".myselect").select2({
            placeholder: "Select a inspector",
            allowClear: true,
            ajax: {
                url: baseurl + '/admin/getdata',
                dataType: 'json',
                type: "GET",
                quietMillis: 50,
                data: function (term) {
                    return {
                        term: term.term
                    };
                },
                results: function (data) {
                    var myResults = [];
                    $.each(data, function (index, item) {
                        myResults.push({
                            'id': item.id,
                            'text': item.firstname
                        });
                    });
                    return {
                        results: myResults
                    };
                }
            }
        });

term.term contains the value of input text in dropdown search box.

HTML

  <select class="myselect" style="width: 50% !important">
        <option></option>
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
        <option value="KY">Kentucky</option>
  </select>

JSON RESPONSE

[{"id":9858,"firstname":"Testing3","status":2,"state":"VA","phone":""},{"id":9857,"firstname":"Testing2","status":2,"state":"VA","phone":""},{"id":9856,"firstname":" david polosky ","status":3,"state":"FL","phone":"[phone]"}]

SELECT2 CDN LINKS

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

PHP SERVERSIDE CODE (LARAVEL)

 $searchtext = $request->get('term');
 $data = Inspector::latest('id')
                ->select('id', 'firstname', 'status', 'state', 'phone')
                ->where('firstname', 'LIKE', '%' . $searchtext . '%')
                ->get()->toArray();
 echo json_encode($data);

Any help is appreciated.

Spano

Where's the PHP code? – Saloma

@RaxWeber The response I shown is the json response returned by php code. – Spano

@RaxWeber Added PHP Code. – Spano

are you able to get into results callback and see the data? – Amando

@Amando If I alert('anything') in the callback, its not working. – Spano

and are you seeing ajax request happening to server? – Amando

probably issue with data? are you sure term.term has correct data and format? – Amando

@Amando In browser console I can see the response. Please check the screenshot I have attached. Yes term.term has the correct data. i checked it. – Spano

Answer 1

In your ajax configuration you use results you should use processResults

Try this

var baseurl = $("#baseurl").val();
    $(".myselect").select2({
        placeholder: "Select a inspector",
        allowClear: true,
        ajax: {
            url: baseurl + '/admin/getdata',
            dataType: 'json',
            type: "GET",
            quietMillis: 50,
            data: function (term) {
                return {
                    term: term.term
                };
            },
            processResults: function (data) {
                var myResults = [];
                $.each(data, function (index, item) {
                    myResults.push({
                        'id': item.id,
                        'text': item.firstname
                    });
                });
                return {
                    results: myResults
                };
            }
        }
    });

Acquah

Yeah ..Thanks alot.. :) – Spano

Answer 2

Aamir@, sometimes errors are misleading. If you see from your code, it doesn't have a reference to b at all. I believe that must be an error that is being thrown from a method outside of your code, due to an error in your code.

You might have to set a break point by clicking on the line number on browser console and then check the call stack to find the error in the code.

Skirling

I dont understand the down vote here. May I know, whats wrong with this? – Skirling

Sorry but I didn't downvote. There is no other js code in my file except select2 code. – Spano

Thats exactly my point was. Console errors are misleading sometimes. You might have got some issue , could be a wrong usage of an options / incorrect data access, which is apparently not identifiable on the first go. In such cases, you need to back track from the console error. When it involves some server code, it is always difficult to get what exactly the issue is and need a bit of back and forth to identify what that not so apparent issue was. – Skirling

Even when it is just 2 lines of code, it could break something in the library which may interpret the data wrong way due to a misconfigured variable in that 2 lines of code. – Skirling

Yeah right.. I got the answer. I should have used processresults. Please check above accepted answer. – Spano