Задать Select2 с данными AJAX

Question

Я использую Select2 4.0.0-rc.2.

The Options page состояний следующее о initSelection

В прошлом выбор2 требуется опция под названием initSelection, который был определен, когда источником пользовательских данных, в настоящее время используется, что позволяет для первоначального отбора компонент будет определен , Это было заменено на метод current на data adapter.

я нашел только примеры для более старых версий выбор2, которые используют initSelection (см Setting initial values on load with Select2 with Ajax)

Как я могу загрузить данные по умолчанию с адаптером данных?

вот мой исходный код (это веточка)

$("#{{ id }}").select2({ 
      ajax: { 
        url: "{{ path(attr.path) }}", 
        dataType: 'json', 
        {% if attr.placeholder is defined %} 
        placeholder: '{{ attr.placeholder }}', 
        {% endif %} 
        delay: 250, 
        data: function (term) { 
         return term; 
        }, 
        processResults: function (data) { 
         return {results: data}; 
        } 

       }, 
      templateResult: function(data){ 
       return '<img width="30" src="'+data.image+'">'+data.text; 
      }, 
      templateSelection: function(data){ 
       return '<img width="30" src="'+data.image+'">'+data.text; 
      }, 

      cache: true, 
      escapeMarkup: function (markup) { return markup; }, // let our custom formatter work 
      minimumInputLength: 2 
     }); 

Если возможно я хочу установки всегда видимые варианты и иметь Аякса другой,

Answer 1

У вас есть подробное объяснение on their docs. Если вам нужно только загрузить данные, как только вы можете сделать, используя следующий код (который был раздели с их страниц Документов):

var $element = $('select').select2(); // the select element you are working with 

var $request = $.ajax({ 
    url: '/my/remote/source' // wherever your data is actually coming from 
}); 

$request.then(function (data) { 
    // This assumes that the data comes back as an array of data objects 
    // The idea is that you are using the same callback as the old `initSelection` 

    for (var d = 0; d < data.length; d++) { 
    var item = data[d]; 

    // Create the DOM option that is pre-selected by default 
    var option = new Option(data.text, data.id, true, true); 

    // Append it to the select 
    $element.append(option); 
    } 

    // Update the selected options that are displayed 
    $element.trigger('change'); 
}); 

Answer 2

В продолжении ответа Milz, я хотел бы добавить, что вам нужно, чтобы добавить пустой значение в конце в противном случае последнее значение никогда не будет выбрано.

... 

    for (var d = 0; d < data.length; d++) { 
    var item = data[d]; 

    // Create the DOM option that is pre-selected by default 
    var option = new Option(data.text, data.id, true, true); 

    // Append it to the select 
    $element.append(option); 
    } 

    var option = new Option('', '', true, true); 
    $element.append(option); 

    ... 

Возможно, есть и другой способ сделать это, но это сделало трюк для меня.

Answer 3

<select id="posow"></select> 

для выше выбора я сделать так:

$(function() { 
      $.getJSON("/f3/tokenize/PO_SoW", function(respond) { 
       $('#posow').select2({ 
        multiple: true, 
        data: respond 
       }); 
      }); 
}); 

реагирует с сервера заключается в следующем:

[{id: 'nms', text: 'FATP'}, 
{id: 'nms', text: 'ATF Plan'}, 
{id: 'nms', text: 'Endorse Plan'}, 
{id: 'nms', text: 'Endorse Date'} 
]