Добавить шрифтовые значки в select2 V4 выпадающие элементы

Question

Я пытаюсь отобразить значки шрифтов в выпадающих меню Select2 v4. Но выпадающее меню отображает html и не генерирует фактический значок. Этот метод работает с select2 V3, но, похоже, не с v4. Любая помощь приветствуется. Спасибо

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

Смотрите скрипку для примера: http://jsfiddle.net/qCn6p/206/

Answer 1

Вот ваш обновленный fiddle

Вы должны обернуть элемент внутри JQuery, как это:

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

Вы можете обернуть возвращение с $.parseHTML().

Пример: return $.parseHTML('<i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text);

Answer 3

Используйте опцию "escapeMarkup", как следовать

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

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

Answer 4

FYI, если вы вернете строку для переопределенных функций templateSelection/templateResult, она будет экранирована (если вы также не переопределите функцию escapeMarkup), однако, если вы вернете объект jquery, он НЕ будет экранирован.

Некоторые примеры также игнорировать форматирование ввода без и идентификатор

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

Смотреть это Fiddle http://jsfiddle.net/dleffler/15myta6t/3/