Aamir Aamir - 1 month ago 17
PHP Question

Select2 TypeError: b is undefined

enter image description hereenter image description hereI'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":"(000)000-4141"}]


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.

Answer

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