Select2：コードを使用して新しいタグを動的に追加

Question

私はタグ付けにselect2を使用しています。ユーザーが新しいタグを追加できるように設定しています。私が扱っている問題は、ユーザエントリを検証し、選択に墨塗りタグを追加することです。

具体的には、ユーザーがタグにスペースを入力すると、formatNoMatchesを使用してjsリンクを表示してタグをサニタイズし、プログラムでタグを追加します。このコードはエラーなしで実行されるようですが、サニタイズが呼び出されると入力のすべての選択がクリアされます。

私は間違っているかもしれない手掛かりはありますか？

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

もう一度ハッキングすると、新しいアイテムを「データ」プロパティに設定して値を設定する必要があることがわかりました。

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

Answer 2

新しい値（配列を渡すことができるタグ）を設定し、「変更」イベントをトリガーすることができます。

var field = $('SOME_SELECTOR'); 

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

についてイベント：

Answer 3

https://select2.github.io/options.html#eventsのみ、このソリューションは、私の作品：既存のタグのための

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