Prevent reload of data with select2 plugin (v4)

Question

I\'m using select2 plugin(v4) and loading his options with ajax.
If i open the select input on the first time the data will be loaded. When I open the select again, the

Answer 1

Since you are using select2_v.4, you have to use data-adapters ( query and initSelection methods were depreciated in V.4.0 ) Following is an example of using custom-data-adapter through an approach called AMD-Pattern. I have had not a chance to test it but I believe this would give you a direction to proceed with.

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>
<script>
    var cachedData;
    $.fn.select2.amd.define('select2/data/customAdapter', ['select2/data/array', 'select2/utils'],
       function (ArrayAdapter, Utils) {
           function CustomDataAdapter($element, options) {
               CustomDataAdapter.__super__.constructor.call(this, $element, options);
           }

           Utils.Extend(CustomDataAdapter, ArrayAdapter);

           CustomDataAdapter.prototype.query = function (params, callback) {
               var retData;
               if (cachedData != undefined) // check if data existing in cachedData variable
                   retData = cachedData;
               else {
                   $.ajax({
                       url: url,
                       dataType: 'json',
                       quietMillis: 250,
                       data: function (params) {
                           return {
                               term: params.term,
                               page: params.page,
                               page_limit: default_page_size
                           };
                       },
                       success: function (data) {
                           retData = {
                               results: data.data,
                               pagination: {
                                   more: (data.page * default_page_size) < data.count
                               }
                           };
                           cachedData = retData; // save the retData in a global variable
                       },
                       error: function (er) {
                           debugger;
                       },
                       cache: true
                   });
               }

               callback(retData);
           };

           return CustomDataAdapter;
       }
);


    $(document).ready(function () {
        var customAdapter = $.fn.select2.amd.require('select2/data/customAdapter');
        $("#select1").select2({
            tags: true,
            dataAdapter: customAdapter,
            escapeMarkup: function (markup) {
                return markup;
            },
            minimumInputLength: 0,
            templateResult: formatTemplateResult,
            templateSelection: formatTemplateSelection
        });
    });
</script>