Select2: dynamicznie dodaj nowy tag przy użyciu kodu

Question

Używam select2 do tagowania i mam go tak skonfigurowany, że użytkownik może dodawać nowe tagi. Problem, z którym mam do czynienia, polega na sprawdzeniu poprawności wpisu użytkownika i dodaniu odkażonego znacznika do selekcji.

Mówiąc dokładniej, kiedy użytkownik wprowadza spację w znaczniku, używam formatuNoMatches, aby wyświetlić łącze js w celu odkażenia tagu, a następnie dodania go programowo. Ten kod wydaje się działać bezbłędnie, ale po wywołaniu dezynfekcji wszystkie selekcje wejścia są kasowane.

Jakieś wskazówki, w których może się nie udać?

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

Po hackowaniu na nim, zdałem sobie sprawę, że powinienem ustawić nowy element na właściwość "data", a nie wartość.

Answer 2

Możesz ustawić nową wartość (jeśli znaczniki mogą przekazywać tablicę) i wyzwalać zdarzenie "zmień".

var field = $('SOME_SELECTOR'); 

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

o zdarzeniach: https://select2.github.io/options.html#events

Answer 3

Tylko to rozwiązanie działa dla mnie:

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