Search on Preloaded data

How Do I...
#1

Hi,
I have a seelct2 , I am calling an API to load data , once the data is loaded I would like to search on the preloaded data. But for some reason data is not getting loaded in select2 . Below is my code:

$(document).ready(function () {
    $.ajax({
        url: '/Service/GetCountries',
        dataType: 'json',
        type: "GET",
        delay: 250,
        data: ({
        }),
        success: function (data) {
            return data;
        }
    }).then(function (response) {
        console.log(response);
        $('.country-select').select2({
            width: 'resolve',
            placeholder: "Country",
            processResults:  function (response) {
                    return {
                        results: $.map(response, function (item) {
                            return {
                                text: item.name,
                                id: item.alpha2Code
                            }
                        })
                    }
                }
 
            
        });

    });
});

Please let me know what I am doing wrong here.

Thanks

#2

The processResults() callback only works with Select2’s built-in AJAX feature. Since you are retrieving the data yourself before you initialize your Select2, you need to process it into the correct format yourself (in other words, put the logic in your processResults callback into the $.ajax() call’s success callback instead), and then pass that object as the data property in the Select2 initialization.