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，當然。