将 fontawesome 图标添加到 select2 V4 下拉项中答案

【问题标题】：Add fontawesome icons into select2 V4 dropdown items将 fontawesome 图标添加到 select2 V4 下拉项中
【发布时间】：2017-02-01 13:54:15
【问题描述】：

我正在尝试在 Select2 v4 下拉项中显示 fontawesome 图标。但是下拉菜单显示的是 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>

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/

【问题讨论】：

标签： javascript jquery jquery-select2-4 fontawesome-4.4.0

【解决方案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
});

【讨论】：

如何将 FontAwesome 添加到 select2 的输入搜索中？

【解决方案2】：

如下使用“escapeMarkup”选项

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

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

【讨论】：

【解决方案3】：

您可以使用$.parseHTML() 包装退货。

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

【讨论】：

【解决方案4】：

仅供参考，如果您为 templateSelection/templateResult 覆盖的函数返回一个字符串，它将被转义（除非您还覆盖了 escapeMarkup 函数），但是如果您返回一个 jquery 对象，它将不会被转义。

一些示例也忽略了没有和 id 的格式化输入

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

看到这个小提琴http://jsfiddle.net/dleffler/15myta6t/3/

【讨论】：