Zdarzenie Select2 do tworzenia nowego znacznika

Question

Używam wtyczki jQuery Select2 (v4) dla selektora znaczników.

Chcę posłuchać, kiedy nowy element zostanie utworzony w elemencie select i wywołać żądanie ajax, aby zapisać nowy znacznik. Odkryłem, że jest zdarzenie createTag, ale zdaje się to uruchamiać za każdym razem, gdy litera zostanie wprowadzona do elementu select2. Jak pokazano w moim skrzypcach: http://jsfiddle.net/3qkgagwk/1/

Czy istnieje podobne zdarzenie, które jest uruchamiane tylko po wprowadzeniu nowego znacznika? To znaczy. jest zamknięty przez szare pudełko zamykające go.

Answer 1

Niestety nie można znaleźć żadnej natywnej metody . Ale jeśli jesteś zainteresowany prostych "obejścia", może to Ci bliżej:

$('.select2').select2({ 
    tags: true, 
    tokenSeparators: [",", " "], 
    createTag: function (tag) { 
     return { 
      id: tag.term, 
      text: tag.term, 
      // add indicator: 
      isNew : true 
     }; 
    } 
}).on("select2:select", function(e) { 
    if(e.params.data.isNew){ 
     // append the new option element prenamently: 
     $(this).find('[value="'+e.params.data.id+'"]').replaceWith('<option selected value="'+e.params.data.id+'">'+e.params.data.text+'</option>'); 
     // store the new tag: 
     $.ajax({ 
      // ... 
     }); 
    } 
}); 

DEMO

---

[EDIT]

Powyższy będzie działać tylko wtedy, gdy tag jest dodawany za pomocą myszy. W przypadku tagów dodanych przez naciśnięcie klawisza space lub przecinek, użyj zdarzenia change.

Następnie można filtrować option z data-select2-tag="true" atrybutu (nowy dodany tag):

$('.select2').select2({ 
    tags: true, 
    tokenSeparators: [",", " "] 
}).on("change", function(e) { 
    var isNew = $(this).find('[data-select2-tag="true"]'); 
    if(isNew.length){ 
     isNew.replaceWith('<option selected value="'+isNew.val()+'">'+isNew.val()+'</option>'); 
     $.ajax({ 
      // ... store tag ... 
     }); 
    } 
}); 

DEMO 2

Answer 2

Innym obejścia. Wystarczy wstawić go na początek:

  }).on('select2:selecting', function (evt) { 

      var stringOriginal = (function (value) { 
       // creation of new tag 
       if (!_.isString(value)) { 
        return value.html(); 
       } 
       // picking existing 
       return value; 
      })(evt.params.args.data.text); 
      ........ 

Opiera się na pliku underscore.js w celu sprawdzenia, czy jest ciąg znaków, czy nie. Możesz zastąpić metodę _.isString cokolwiek chcesz.

Używa tego, że gdy nowy termin jest tworzony, zawsze jest obiektem.