Предотвратить перезагрузку данных с помощью плагина select2 (v4)

Question

Я использую плагин select2 (v4) и загружаю его параметры с помощью ajax.
Если я открою вход выбора в первый раз, когда данные будут загружены. Когда я снова открываю выбор, те же данные перезагружаются.

Есть ли способ предотвратить эту «перезагрузку» данных? Я имею в виду, если я просто открою select2, и параметры были загружены ранее, я не хочу снова загружать.

Вот мой текущий код:

$(select_input).select2({ 
    ajax: { 
    url: url, 
    dataType: 'json', 
    quietMillis: 250, 
    data: function (params) { 
     return { 
     term: params.term, 
     page: params.page, 
     page_limit: default_page_size 
     }; 
    }, 
    processResults: function (data) { 
     return { 
     results: data.data, 
     pagination: { 
      more: (data.page * default_page_size) < data.count 
     } 
     }; 
    }, 
    cache: true 
    }, 
    escapeMarkup: function (markup) { 
    return markup; 
    }, 
    minimumInputLength: 0, 
    templateResult: formatTemplateResult, 
    templateSelection: formatTemplateSelection 
}); 

Answer 1

Поскольку вы используете select2_v.4, вы должны использовать data-adapters (query и initSelection методы были амортизируются в v.4.0) Ниже приведен пример использования custom-data-adapter через подход под названием AMD-Pattern. У меня не было возможности проверить это, но я верю, что это даст вам направление для продолжения.

<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>