Select2: kodu kullanarak dinamik olarak yeni etiket ekle

Question

Etiketleme için select2 kullanıyorum ve bir kullanıcı yeni etiketler ekleyebilecek şekilde ayarlıyorum. Çalıştığım sorun, kullanıcı girişini onaylamak ve dezenfekte edilmiş etiketi seçime eklemek.

Daha net olmak gerekirse, bir kullanıcı bir etikette boşluk girdiğinde, etiketi sterilize etmek için bir js bağlantısı görüntülemek üzereNoMatches biçimini kullanıyorum ve ardından etiketi programsal olarak ekliyorum. Bu kod hatasız çalışır, ancak sanitize çağrıldığında, girişin tüm seçimleri temizlenir.

Yanlış gidebileceğimiz ipuçları var mı?

var data=[{id:0,tag:'enhancement'},{id:1,tag:'bug'},{id:2,tag:'duplicate'},{id:3,tag:'invalid'},{id:4,tag:'wontfix'}]; 
function format(item) { return item.tag; } 

function sanitize(a){ 

    $("#select").select2('val',[{ 
     id: -1, 
     tag: a 
     }]); 

     console.log(a); 
}; 

$("#select").select2({ 
    tags: true, 
    // tokenSeparators: [",", " "], 
    createSearchChoice: function(term, data) { 
    return term.indexOf(' ') >= 0 ? null : 
    { 
     id: term, 
     tag: term 
     }; 
    }, 
    multiple: true, 
    data:{ results: data, text: function(item) { return item.tag; } }, formatSelection: format, formatResult: format, 
    formatNoMatches: function(term) { return "\"" + term + "\" <b>Is Invalid.</b> <a onclick=\"sanitize('"+ term +"')\">Clear Invalid Charecters</a>" } 
}); 

Answer 1

Bunu hackledikten sonra, yeni öğeyi "veri" özelliğine ayarlamam ve değer vermemem gerektiğini anladım. (Eğer dizisi iletebilir if etiketine)

var newList = $.merge($('#select').select2('data'), [{ 
     id: -1, 
     tag: a 
     }]); 
$("#select").select2('data', newList) 

Answer 2

Yeni değer ayarlayabilirsiniz ve tetik 'değiştir' olayı.

var field = $('SOME_SELECTOR'); 

field.val(['a1', 'a2', 'a3']) // maybe you need merge here 
field.trigger('change') 

Hakkında olaylar:

Answer 3

https://select2.github.io/options.html#events Sadece bu çözüm benim için çalışıyor: Mevcut etiketleri için

function convertObjectToSelectOptions(obj){ 
    var htmlTags = ''; 
    for (var tag in obj){ 
     htmlTags += '<option value="'+tag+'" selected="selected">'+obj[tag]+'</option>'; 
    } 
    return htmlTags; 
} 
var tags = {'1':'dynamic tag 1', '2':'dynamic tag 2'}; //merge with old if you need 
$('#my-select2').html(convertObjectToSelectOptions(tags)).trigger('change');