Select2はすべての最初のタグを削除します

Question

私はDjangoで多対多の関係のためにSelect2を使用しています。あらゆる種類の検証制約のため、Select2タグフィールドに入力するとAJAXリクエストを介して関連オブジェクトを作成するのが最も簡単です。最小限の例の下（およびFiddle）。

HTML：CSSの

<select class="js-example-tags form-control" multiple="" tabindex="-1" aria-hidden="true"></select> 

ビット：

.js-example-tags { 
    width: 100%; 
} 

そして、JS：

function register(event) { 
    console.log(event); 
    if (event.params.data.id == event.params.data.text) { 
    $.ajax({ 
     type: 'POST', 
     url: 'https://www.random.org/integers/?num=1&min=0&max=999&col=1&base=10&format=plain&rnd=new', 
     success: function(data) { 
     $('option[value="' + event.params.data.text + '"').attr('value', data); 
     }, 
     error: function(jqXHR, textStatus, errorThrown) { 
     $('option[value="' + event.params.data.id + '"]').remove(); 
     } 
    }); 
    } 
} 


$(".js-example-tags").select2({ 
    tags: true, 
    data: [{"text": "Known Author 1", "id": 1}, {"text": "Known Author 2", "id": 2}] 
}); 
$(".js-example-tags").on('select2:select', register); 

ユーザーヒットを返す：

1. ・セレクトを
2. 、値=プレースホルダとしてテキストと
3. トリガーselect2:selectイベントとそのAJAX呼び出し（たぶん）新しく作成されたオブジェクトIDが返され、したがってregister機能、
4. で新しいオプションを追加することになっています以前のオプション値を実際の値に置き換えます。

しかし、明らかに、何らかの形で他の何かが起こる：最初のタグを正しく追加された - 少なくとも外観から - しかし、あなたは第二のタグを追加するとき、それはリターンを押すと消え、以降第三タグから、新しいですタグが最初のタグを上書きします。

この時点では、Select2のドキュメントは最小限に抑えられている可能性があります。ありがとうございました！

Answer 1

新しいソリューション

古いソリューションは、ソートのいくつかのケースでは動作を停止した後、私は選択2バグトラッカーで、[この問題のコメント]（https://github.com/select2/select2/issues/3057#issuecomment-77560623 ）を見つけました。私はなぜselected: true属性が私のために働いていたのかわかりません。多分それはちょうどはのように思われた。 （New Fiddle。）

function selectOption(select, id) { 
    var selectedValues = select.val(); 
    if (selectedValues == null) { 
    selectedValues = new Array(); 
    } 
    selectedValues.push(id); 
    select.val(selectedValues).trigger('change'); 
} 

function register(event) { 
    if (typeof variable !== event.params && 
     event.params.data.text == event.params.data.id) { 
    $.ajax({ 
     type: 'POST', 
     url: 'https://www.random.org/integers/?num=1&min=0&max=999&col=1&base=10&format=plain&rnd=new', 
     success: function(data) { 
     var select = $(event.target); 
     var id = data.replace(/^\s+|\s+$/g, ''); 
     var text = event.params.data.text; 
     select.find('option[data-select2-tag="true"][value="' + text + '"]').remove(); 
     select.append('<option value="' + id + '">' + text + '</option>'); 
     selectOption(select, id); 
     } 
    }); 
    } 
} 

var select = $(".js-example-tags"); 
select.select2({ 
    tags: true, 
    // selectOnClose: true, // Too much recursion error 
    data: [{"text": "Known Author 1", "id": 1}, {"text": "Known Author 2", "id": 2}] 
}); 
select.on('select2:select', register); 

ボーナス質問：単語についてとても特別な何「である」それは常にSelectセレクトによって削除されることを？他の典型的なストップワードは取り除かれない。

---

旧ソリューション最後に

（または何、これまでエンドとしてカウント）私はダリオによって提案された溶液で行ってきた - 完全にすべてのエントリの後にSelectセレクト入力を再作成（Fiddle）：

私はに走った

function initSelect2(select) { 
    select.find('option[data-select2-tag="true"]').remove(); 
    select.select2({ 
    tags: true, 
    // selectOnClose: true, // Too much recursion error 
    data: select.data('entries') 
    }); 
} 

function register(event) { 
    if (typeof variable !== event.params && 
     event.params.data.text == event.params.data.id) { 
    var model = $(event.target).data('model'); 
    $.ajax({ 
     type: 'POST', 
     url: 'https://www.random.org/integers/?num=1&min=0&max=999&col=1&base=10&format=plain&rnd=new', 
     success: function(data) { 
     var select = $(event.target); 
     var entries = select.data('entries'); 
     entry = {id: data.replace(/^\s+|\s+$/g, ''), 
       text: event.params.data.text, 
       selected: true}; 
     entries.push(entry); 
     select.data('entries', entries); 
     initSelect2(select); 
     select.parent().find('input.select2-search__field').focus(); 
     } 
    }); 
    } 
} 

var select = $(".js-example-tags"); 
select.data('entries', [{"text": "Known Author 1", "id": 1}, {"text": "Known Author 2", "id": 2}]); 
initSelect2(select); 
select.on('select2:select', register); 

2つの問題があった。

1. フィールドがその焦点、NEを失うことフィールドに戻されるべきeds、および
2. は、適切なIDを持つ新しく追加されたフィールドに加えて、data-select2-tagフィールド（プレースホルダーID付き）を保持するので、最初に削除する必要がありますSelect2が再現される前に

これらは上記のコードで解決されています。