Seçme 2. etiketinde select2? Ben Select2 kullanıyorum

Question

,

Ben yoksa bir etiket İstiyorum yoksa ben

Ben de twitter ön yükleme alanı kullanıyorum, yeni bir etiket ekleyebilir onu kurdunuz

Bunu yapmak için yeni bir etiket olarak işaretleyin, bunu yapmak için '<span class="label label-important">New</span> ' ile metni select2 başlatıcı olarak ekleyin.

$('#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; 
       } 
      }) 
     } 
    }) 

Şimdi bu işleri büyük bir

ne etiketi için girmiş İhtiyacım toplanan kadarıyla o etiket

için biçimlendirme parçası olarak var sürece formatResult, formatSelection veya matcher'un üzerine yazmak için.

Dokümantasyondan aldığım şey budur, ancak bunu nasıl değiştirmem gerektiğini anlamıyorum.

Answer 1

Soruyu (ve yanıtlamayı) gönderdiğiniz için teşekkür ederiz! Bunu çözmek için daha basit bir yol bulduk:

... 
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; 
    } 
}, 
... 

Sen createSearchChoice() işlevinden herhangi bir nesne döndürebilir, bu yüzden sadece bu yeni bir öğe var formatResult() anlatan bir alanda ekleyin.

Bu şekilde, döndürülen öğenin metni yalnızca istediğiniz metin ve formatResult() çok daha basittir.

Answer 2

Ah, formatResult işlevinin üzerine yazarak var.

Temel olarak yaptığımız şey, eğer ilk karakterler bizim newTagMark ise bizim olup olmadığımızı kontrol etmektir, sonra bunu söker, eşleşen mantığı uygularız, sonra da tükürmek için tekrar tekrar hazırlarız.

Mantığın büyük kısmı, select2'nin dahili markMatch işlevinin yalnızca bir kopyasıdır.

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