Neuen Tag in select2 markieren?

Question

ich select2 verwende,

Ich habe es so einrichten, kann ich einen neuen Tag hinzufügen, wenn es nicht vorhanden ist,

Ich bin auch Twitter Bootstrap verwenden, Wenn ein Tag ich nicht existiert will Markieren Sie es als neues Tag, dazu füge ich den Text mit '<span class="label label-important">New</span> ' diesem als mein select2 Initialisierer voran.

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

Jetzt arbeitet diese großen

Es wäre denn, was ich für den Tag existiert als Teil der Markup für das Etikett eingegeben

Von dem, was ich gesammelt habe ich brauche entweder die , formatSelection oder matcher zu überschreiben.

Das ist, was ich von der Dokumentation habe, aber ich verstehe nicht, wie ich es ändern muss.

Answer 1

Danke für das Posten (und Beantworten) der Frage! Ich glaube, ich habe einen einfacheren Weg gefunden, dieses Problem zu lösen:

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

Sie kehren aus der createSearchChoice() Funktion jedes Objekt können, so fügen Sie einfach in einem Feld zu sagen formatResult(), dass es ein neues Element ist.

Auf diese Weise ist der Text des zurückgegebenen Elements nur der gewünschte Text, und formatResult() ist viel einfacher.

Answer 2

Ah, Durch Überschreiben der formatResult Funktion.

Grundsätzlich überprüfen wir, ob die ersten Zeichen unsere newTagMark sind, wenn dies der Fall ist, dann streichen wir diese ab, wenden die entsprechende Logik an und stellen sie dann erneut vor, um sie auszuspucken.

Der Großteil der Logik ist eigentlich nur ein Kopieren und Einfügen der internen markMatch Funktion von select2.

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