Backbone/Marionette with select2 v4.0，编辑标签

Question

我有this fiddle这是Backbone/Marionette操场小提琴的延伸。我包含了select2 js和css文件。

是否可以编辑不是最后一个标签的标签？您可以通过框中的退格键进行编辑，但它只能让您触摸最后一个。我希望它的行为像一个gmail'来'列出你可以双击一个并编辑它，然后它回到模糊标签。

 this.$('#foo').select2({ 
      data: [{ 
       id: 1, 
       text: "test1.com" 
      }, { 
       id: 2, 
       text: "test2.com" 
      }], 
      multiple: true, 
      allowclear: true, 
      tags: [], 
      placeHolder: "Click Here!", 
      tokenSeparators: [',', ' '], 
      minimumResultsForSearch: 1 
     }); 

Answer 1

不幸的是，没有办法使用select2开箱即用功能来做到这一点。但是，这是相当扩展，所以这里是什么做的伎俩：

var $select2 = this.$('#foo').select2({ tags: true }); 

var select2 = $select2.data("select2");    
$(document.body).on("dblclick", ".select2-selection__choice", function(event) { 
    var $target = $(event.target); 

    // get the text and id of the clicked value 
    var targetData = $target.data("data"); 
    var clickedValue = targetData.text; 
    var clickedValueId = targetData.id; 

    // remove that value from select2 selection 
    var newValue = $.grep(select2.val(), function (value) { 
     return value !== clickedValueId; 
    }); 
    $select2.val(newValue).trigger("change"); 

    // set the currently entered text to equal the clicked value 
    select2.$container.find(".select2-search__field").val(clickedValue).trigger("input").focus(); 
}); 

而一个JsFiddle，当然。