Select2：新しいタグを選択した後の更新オプション

Question

既存のタグから選択するか新しいタグを追加できるタグ付けシステムを実装しました。新しいタグが選択されると、AJAX呼び出しを使用して永続化されます。

これを達成するために、私はコールバックcreateTagとイベントselect2:selectを使用します。私が選択されたときにのみタグを作成するのが好きなので、イベントselect2:selectがトリガーされたら、私はAJAXコールを行います。

問題は、すでに作成されたselect2のオプションを、新しいタグをデータベースに保存して取得したIDで更新する必要があることです。これに対して最もクリーンなソリューションは何ですか？

は、ここで私が持っているものです。

$('select.tags').select2({ 
    tags: true, 
    ajax: { 
     url: '{{ path('tag_auto_complete') }}', 
     processResults: function (data) { 
      return { 
       results: data.items, 
       pagination: { 
        more: false 
       } 
      }; 
     } 
    }, 
    createTag: function (tag) { 
     return { 
      id: tag.term, // <-- this one should get exchanged after persisting the new tag 
      text: tag.term, 
      tag: true 
     }; 
    } 
}).on('select2:select', function (evt) { 
    if(evt.params.data.tag == false) { 
     return; 
    } 

    $.post('{{ path('tag_crrate_auto_complete') }}', { name: evt.params.data.text }, function(data) { 
     // ----> Here I need to update the option created in "createTag" with the ID 
     option_to_update.value = data.id; 

    }, "json"); 
}); 

Answer 1

私の問題は、私はネイティブの選択フィールドへ<option>タグとして新しいタグを追加していなかったということでした。

この値を持つ<option>タグが存在する場合、select2がトラフの値select2.val(values)をチェックするため、これは必要です。 select2を指定しない場合、値は配列から自動的にスローされ、対応するoptionタグを持つ値の配列が基になるselectフィールドに設定されます。

だから、これはそれが（SELECT2 4.0.xのために）正しいどのように動作するかです：

$('select.tags').select2({ 
    tags: true, 
    ajax: { 
     url: '{{ path('tag_auto_complete') }}', 
     processResults: function (data) { 
      return { 
       results: data.items, 
       pagination: { 
        more: false 
       } 
      }; 
     } 
    }, 
    createTag: function (tag) { 
     return { 
      id: tag.term, 
      text: tag.term, 
      tag: true 
     }; 
    } 
}).on('select2:select', function (evt) { 
    if(evt.params.data.tag == false) { 
     return; 
    } 

    var select2Element = $(this); 

    $.post('{{ path('tag_crrate_auto_complete') }}', { name: evt.params.data.text }, function(data) { 
     // Add HTML option to select field 
     $('<option value="' + data.id + '">' + data.text + '</option>').appendTo(select2Element); 

     // Replace the tag name in the current selection with the new persisted ID 
     var selection = select2Element.val(); 
     var index = selection.indexOf(data.text);    

     if (index !== -1) { 
      selection[index] = data.id.toString(); 
     } 

     select2Element.val(selection).trigger('change'); 

    }, 'json'); 
}); 

最小限AJAX応答（JSON形式）はこのように見えるように持っている：

[ 
    {'id': '1', 'text': 'foo'}, 
    {'id': '2', 'text': 'bar'}, 
    {'id': '3', 'text': 'baz'} 
] 

あなたが可能追加のデータを含む結果リストの独自のレンダリングを言うために、各結果に追加のデータを追加します。