在select2中標記新標記？

Question

我使用選擇2，

我已經設定，讓我可以添加一個新的標籤，如果不存在的話，

我也使用Twitter的引導， 如果標籤不存在，我想將其標記爲新標籤，爲此，我在之前添加文本作爲我的select2初始值設定項。

$('#newVideoCategory').select2({ 
     placeholder: 'Select a category...', 
     data: categories, 
     createSearchChoice: function (term, data) { 
      if ($(data).filter(function() { 
       return this.text.localeCompare(term) === 0; 
      }).length === 0) { 
       return {id: term, text: '<span class="label label-important">New</span> ' + term}; 
      } 
     }, 
     initSelection: function (element, callback) { 
      $(categories).each(function() { 
       if (this.id == element.val()) { 
        callback(this); 
        return; 
       } 
      }) 
     } 
    }) 

現在這個偉大的工程

除非什麼我已經進入了標籤的標記爲標籤

的一部分，從我所收集的，我需要存在覆蓋formatResult,formatSelection或matcher。

這就是我從文檔中得到的，但我不明白我需要如何改變它。

Answer 1

感謝您發佈（和回答）這個問題！我想我已經找到解決這個簡單的方法：

... 
createSearchChoice:function(term, data) { 
    if ($(data).filter(function() { 
     return this.text.localeCompare(term) === 0; 
    }).length === 0) { 
     return {id:term, text: term, isNew: true}; 
    } 
}, 
formatResult: function(term) { 
    if (term.isNew) { 
     return '<span class="label label-important">New</span> ' + term.text; 
    } 
    else { 
     return term.text; 
    } 
}, 
... 

您可以從createSearchChoice()函數返回任何對象，所以只需添加一個字段告訴formatResult()，這是一個新的項目。

這樣，返回項目的文本就是您想要的文本，並且formatResult()簡單得多。

Answer 2

啊， 通過覆蓋formatResult函數得到它。

基本上我們要做的就是檢查第一個字符是否是我們的newTagMark如果是，那麼我們將其去掉，應用匹配的邏輯，然後再加上它來將其吐出。

大部分邏輯實際上只是select2的內部markMatch函數的複製和粘貼。

var newTagMark = '<span class="label label-important">New</span> '; 

$('#newVideoCategory').select2({ 
    placeholder: 'Select a category...', 
    data: categories, 
    createSearchChoice: function (term, data) { 
     if ($(data).filter(function() { 
      return this.text.localeCompare(term) === 0; 
     }).length === 0) { 
      return {id: term, text: newTagMark + term}; 
     } 
    }, 
    initSelection: function (element, callback) { 
     $(categories).each(function() { 
      if (this.id == element.val()) { 
       callback(this); 
       return; 
      } 
     }) 
    }, 
    formatResult: function(result, container, query) { 
     var text = result.text; 
     var term = query.term; 
     var markup=[]; 
     var marked = false; 
     if(text.substr(0, newTagMark.length) == newTagMark){ 
      text = text.substr(newTagMark.length); 
      markup.push(newTagMark); 
     } 

     var match=text.toUpperCase().indexOf(term.toUpperCase()), 
       tl=term.length; 
     if (match<0) { 
      markup.push(text); 
      return; 
     } 

     markup.push(text.substring(0, match)); 
     markup.push("<span class='select2-match'>"); 
     markup.push(text.substring(match, match + tl)); 
     markup.push("</span>"); 
     markup.push(text.substring(match + tl, text.length)); 
     return markup.join(""); 
    } 
});