$("#selIUT").select2({
    cacheDataSource: [],
    placeholder: "Please enter the name",
    query: function(query) {
        self = this;
        var key = query.term;
        var cachedData = self.cacheDataSource[key];

        if(cachedData) {
            query.callback({results: cachedData.result});
            return;
        } else {
            $.ajax({
              url: '/ajax/suggest/',
              data: { q : query.term },
              dataType: 'json',
              type: 'GET',
              success: function(data) {
                self.cacheDataSource[key] = data;
                query.callback({results: data.result});
              }
            })
        }
    },
    width: '250px',
    formatResult: formatResult,
    formatSelection: formatSelection,
    dropdownCssClass: "bigdrop",
    escapeMarkup: function (m) { return m; }
});

[{"id": 0, "name": "Foo"}, {"id": 1, "name": "Bar"}]

fetchFromAPI = function() {
        console.log("fetchFromAPI called");
        var jqxhr = $.ajax(
            {
                dataType:'json',
                type: 'GET',
                url: "/services",
                success: function(data, textStatus, jqXHR) {
                    services_raw = data;
                    console.log("rosetta.fn.fetchServicesFromAPI SUCCESS");
                    rosetta.fn.refreshServicesSelect();
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log("Error inside rosetta.fn.fetchServicesFromAPI", errorThrown, textStatus, jqXHR);
                    setTimeout(rosetta.fn.fetchServicesFromAPI(), 3000);  // retry in 3 seconds
                }
            }
        )
            .done(function () {
                console.log("success");
                console.log(jqxhr);
            })
            .fail(function () {
                console.log("error");
            })
            .always(function () {
                console.log("complete");
            });

        // Perform other work here ...

        // Set another completion function for the request above
        jqxhr.always(function () {
            console.log("second complete");
        });
    };

refreshServicesSelect = function () {
    // ref: http://jsfiddle.net/RVnfn/2/
    // ref2: http://jsfiddle.net/RVnfn/101/    # mine
    // ref3: http://jsfiddle.net/RVnfn/102/    # also mine

    console.log('refreshServicesSelect called');
    $("#add-service-select-service").select2({
        // allowClear: true
        data: function() {
            var arr = [];  // container for the results we're returning to Select2 for display

            for (var idx in services_raw) {
                var item = services_raw[idx];
                arr.push({
                    id: item.id,
                    text: item.name,
                    _raw: item  // for convenience
                });
            }
            return {results: arr};
        }
    });
};

<input id="add-service-select-service" type="hidden" style="width:100%">

window.fetchFromAPI();
window.refreshServicesSelect();

// I used an onClick event to fire the AJAX, but this can be attached to any event.
// Ensure ajax call is done *ONCE* with the "one" method.
$('#mySelect').one('click', function(e) {
    // Text to let user know data is being loaded for long requests.
    $('#mySelect option:eq(0)').text('Data is being loaded...');
    $.ajax({
        type: 'POST',
        url: '/RetrieveDropdownOptions',
        data: {}, // Any data that is needed to pass to the controller
        dataType: 'json',
        success: function(returnedData) {
            // Clear the notification text of the option.
            $('#mySelect option:eq(0)').text('');
            // Initialize the Select2 with the data returned from the AJAX.
            $('#mySelect').select2({ data: returnedData });
            // Open the Select2.
            $('#mySelect').select2('open');
        }
    });
    // Blur the select to register the text change of the option.
    $(this).blur();
});