How can I fill all data in select2 (4.0) when page loaded?

Question

I am using select2 plugin (v.4.0). What I am trying to do:

    $("#search-input-chains").select2({
                    placeholder: "Unit",
                    theme: "bootstrap4",
                    allowClear: true,
                    initSelection: function (element, callback) {
                        callback({id: 1, text: 'Text'});
                    },
                    ajax: {
                        url: function () {
                            return getURLForFilial();
                        },
                        dataType: 'json',
                        delay: 250,
                        processResults: function (response) {
                            console.log(response);
                            return {
                                results: response
                            };
                        },
                        cache: false
                    }
                });

function getURLForFilial() {
                return '/user/rest/data/entry/units/branches?type=1';
            }

I need to understand, whether my control has data retrieved from DB or not, and if there is no data - this select list shall not be activated. I found how I can understand the data amount:

$("#search-input-chains").data().select2.results.$results[0].childNodes.length

(maybe there is another way that is much better?)

But this piece of code returns 0 until I will activate (click) on the select2 box and trigger AJAX request to find data.

I read a lot about how can I perform the pre-call off AJAX, but it doesn't work. I tried to trigger event on select2 in such a way:

 $("#search-input-chains").val().trigger('change');

Please, advice, how can I load data to my select2 control with the page load to understand whether I need to disable this select or not?

Answer 1

I've made it via AJAX:

ajax({
    type: 'GET',
    url: '/user/rest/data/entry/units/branches?type=1'
}).then(function (data) {
    if (data.length !== 0) {
        chainsSelectElement.prop("disabled", false);
        chainSelectorHasData = true;
    } else {
        // create the option and append to Select2
        let option = new Option('Nothing', 'null', true, true);
        chainsSelectElement.append(option);
        chainSelectorHasData = false;
        chainsSelectElement.prop("disabled", true);
    }
    getDataForSubdivisions();
});