Set dane Select2 po wkładce z AJAX

Question

Używam select2 z AJAX (kod poniżej):

$(".select2-ajax").select2({ 
     placeholder: "Search user", 
     minimumInputLength: 1, 
     ajax: { 
      url: $('#url-search-client').val(), 
      dataType: 'json', 
      type: 'post', 
      data: function (term, page) { 
      return { 
       filter: term 
      }; 
      }, 
      results: function (data, page) { 
      return {results: data}; 
      } 
     }, 
     width : '50%', 
     formatInputTooShort: function() {return 'Informe mais caracteres'; }, 
     formatResult: formatResultSelectAjax, // omitted for brevity, see the source of this page 
     formatSelection: formatSelectAjaxValue, // omitted for brevity, see the source of this page 
     dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller 
    }); 

Cóż, jeśli nie znaleziono klienta, użytkownik może użyć przycisku, aby otworzyć modalnego i dodać nowego klienta, czy możliwe jest użycie zwrotu (json z identyfikatorem i namae) nowego klienta i umieszczenie danych (np. nazwy) w wybranym2 jako wybrana?

$('.btn-form-client').click(function() { 
     $.ajax({ 
      url: $('#frm-client').attr('action'), 
      dataType: 'json', 
      type: 'post', 
      data: $('#frm-client').serialize() 
     }).done(function (data) { 
      $('#modal-client').modal('hide') 
     }); 
     return false; 
    }); 

Answer 1

Udało mi się sprawić, żeby działało. Po odpowiedzieć w jQuery, otrzymuję JSON z nowymi danymi i ustaw ukryte wejście i select („.select2-ajax”)

$('#client=id').val(data.id); 
$('#modal-solicitante').modal('hide'); //This is my 
$(".select2-ajax").select2('data', {id: data.id, name: data.name, email: data.email}); 

Answer 2

Począwszy v4.x, select2 nie używa już input pola ukrytego . Zamiast tego create a new Option i dołączyć go do elementu select:

var newOption = new Option(data.name, data.id, true, true); 
$(".select2-ajax").append(newOption).trigger('change'); 

Połączenie true argumentów i trigger('change') będzie upewnić się, że nowy <option> jest wybierany automatycznie po dodaniu.

Zobacz mój codepen dla pełnego działającego przykładu.