Select2: neues Tag dynamisch hinzufügen mit Code

Question

Ich benutze select2 zum Tagging und ich habe es so eingerichtet, dass ein Benutzer auch neue Tags hinzufügen kann. Das Problem, mit dem ich es zu tun habe, ist die Validierung des Benutzereintrags und das Hinzufügen des bereinigten Tags zur Auswahl.

Um genauer zu sein, wenn ein Benutzer ein Leerzeichen in einem Tag eingibt, verwende ich formatNoMatches, um eine js-Verknüpfung anzuzeigen, um das Tag zu bereinigen und dann das Tag programmgesteuert hinzuzufügen. Dieser Code scheint ohne Fehler zu laufen, aber wenn sanitize aufgerufen wird, werden alle Selektionen der Eingabe gelöscht.

Irgendwelche Hinweise, wo ich vielleicht falsch liege?

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

Nach dem hacken etwas mehr ich erkannte, dass ich das neue Element auf die "Daten" -Eigenschaft setzen sollte und nicht Wert.

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

Answer 2

Sie können einen neuen Wert festlegen (wenn Tags ein Array übergeben können) und das Ereignis "change" auslösen.

var field = $('SOME_SELECTOR'); 

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

Über Ereignisse: https://select2.github.io/options.html#events

Answer 3

Nur diese Lösung funktioniert für mich:

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');