select2，移除选项会改变数据但不会改变值

Question

我正在使用Select2进行标记应用程序。但是，我在删除项目上的现有标记时遇到了问题。它是不一致的，但似乎取决于项目; 在以下示例中，我始终可以删除标签“Bugs”，但无论我尝试删除的顺序如何，其他标签都无法删除。

控制台日志显示已从数据中删除了删除的项目，正如应该的那样，而已删除事件将正确的项目标识为已删除，但在“val”中没有看到任何更改，因此没有向服务器发送任何更改。

代码:

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

- sybaritic

---

你能否把这个放到 JSFiddle 上呢？你是在使用 AJAX 来添加或删除数据库表中的标签吗？ - Jay Rizzi

Ajax仅用于为用户搜索提取现有标签。添加和删除标签是在服务器提交表单后完成的（无需ajax），并且运行良好（无需select2）。删除函数上的控制台日志似乎指向一个JS问题。 - sybaritic

我不确定如何运行JS Fiddle，因为ajax加载的数据在我的本地服务器上。从ajax返回的JSON都是以{"id": xxx, "fields": {"name": tag_name}}的形式呈现的。 - sybaritic

Answer 1

尝试从输入元素的"value"属性中删除空格。

更改为：

value="Bugs, Existentialism, Kafkaesque"

至：

value="Bugs,Existentialism,Kafkaesque"

或者，您可以在initSelection方法中去掉空格。

我知道这些空格不应该存在--否则它们将成为id值的一部分--但我不确定为什么它们会导致值变得如此混乱。

这里是一个jsfiddle显示了问题，以及一个去掉空格的jsfiddle。

- John S

---

这解决了问题。我在initSelection中使用了", "而不是","进行分割，问题得到了解决。最好在那里解决，因为服务器默认值包含空格（Django）。非常感谢！ - sybaritic

谢谢，伙计们！我已经发布了@sybaritic建议的解决方案。 - Sergey Alekseev

Answer 2

在initSelection中将.split(",")更改为.split(", "):

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

- Sergey Alekseev