Select2, delete parameter change data, but not value

Question

I am using Select2 for my tag application. However, I am unable to remove existing tags for items. This is inconsistent, but seems to depend on the subject; I can always remove the Errors tag in the following example, but the rest cannot be removed, regardless of the order in which I try to do this.

The console log shows that the deleted item is removed from the data as it should be, and the remote event identifies the correct item as deleted, but no changes are observed in the "val", and thus no changes, the server.

the code:

<input id="id_tags" name="tags" type="text" value="Bugs, Existentialism, Kafkaesque" />    
$("#id_tags").select2({
        tokenSeparators:[","],
        placeholder: "Start typing your tags",
        createSearchChoice: function(term, data){
            if ($(data).filter(function(){
                return this.fields.name.localeCompare(term) === 0;
            }).length === 0) {
                return {
                    id: term,
                    fields: {"name": term}
                };
            }
        },
        multiple:true,
        ajax: {
            url: window.location.origin+'/tagsearch/',
            dataType: 'json',
            data: function( term, page ) {
                return {tag: term};
            },
            results: function (data, page) {
                return {results: data};
            }
        },
        formatResult: tagformat,
        formatSelection: tagformat,
        maximumSelectionSize: 20,
        formatSelectionTooBig: function(limit) {
            return "Stories are limited to " + limit + " tags.";
        },
        initSelection : function(element, callback){
            var data = [];
            $(element.val().split(",")).each(function () {
                data.push({id:this, fields:{name:this}});
            });
            callback(data);
        }
    });

$('#id_tags').on("select2-removed", function(e){
        var data = $("#id_tags").select2("data");
        console.log($('#id_tags').select2('val'));
        console.log("removed "+ e.choice.fields.name);
        console.log(data);
    });

Answer 1

"value" .

:

value="Bugs, Existentialism, Kafkaesque"

To:

value="Bugs,Existentialism,Kafkaesque"

initSelection.

, - id, , .

jsfiddle, , jsfiddle .

Answer 2

.split(",") .split(", ") initSelection:

initSelection : function(element, callback){
  var data = [];
  $(element.val().split(", ")).each(function () {
      data.push({id:this, fields:{name:this}});
  });
  callback(data);
}