Fügen Sie fontawesome Symbole in select2 V4 Dropdown-Elemente hinzu

Question

Ich versuche, fontawesome Symbole in den Select2 v4 Dropdown-Elementen anzuzeigen. Aber das Dropdown-Menü zeigt den HTML-Code an und erzeugt nicht das eigentliche Icon. Diese Methode funktioniert mit select2 V3, scheint aber nicht mit v4 zu funktionieren. Jede Hilfe wird geschätzt. Danke

HTML

<div class="select2-wrapper"> 
    <select class="input icons_select2"> 
     <option value="fa-dribbble" data-icon="fa-dribbble">Dribbble</option> 
     <option value="fa-dropbox" data-icon="fa-dropbox">Dropbox</option> 
     <option value="fa-facebook" data-icon="fa-facebook">Facebook</option> 
    </select> 
</div> 

JS

function iformat(icon) { 
var originalOption = icon.element; 
return '<i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text; 
} 
$('.icons_select2').select2({ 
width: "100%", 
templateSelection: iformat, 
templateResult: iformat 
}); 

Siehe die Geige für ein Beispiel: http://jsfiddle.net/qCn6p/206/

Answer 1

Hier sind Ihre fiddle aktualisiert

Sie haben Ihr Element wickeln innerhalb von jquery wie folgt aus:

function iformat(icon) { 
    var originalOption = icon.element; 
    return $('<span><i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text + '</span>'); 
} 
$('.icons_select2').select2({ 
    width: "100%", 
    templateSelection: iformat, 
    templateResult: iformat, 
    allowHtml: true 
}); 

Answer 2

Sie die Rückkehr mit $.parseHTML() wickeln kann.

Beispiel: return $.parseHTML('<i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text);

Answer 3

Verwenden Sie die "escapeMarkup" Option wie folgt

$('.icons_select2').select2({ 
    width: "100%", 
    templateSelection: iformat, 
    templateResult: iformat, 
    escapeMarkup: function(m) { 
     return m; 
    } 
}); 

http://jsfiddle.net/qCn6p/209/

Answer 4

FYI Wenn Sie eine Zeichenfolge für die überschriebenen templateSelection/templateResult-Funktionen zurückgeben, wird es maskiert (außer Sie überschreiben auch die escapeMarkup-Funktion). Wenn Sie jedoch ein jquery-Objekt zurückgeben, wird es nicht maskiert.

Einige Beispiele ignorieren auch Eingabeformatierung ohne und id

if (!icon.id) { return icon.text; } 

Sehen Sie diese Fiddle http://jsfiddle.net/dleffler/15myta6t/3/