如何将HTML占位符添加到select2？

Question

我想这样向占位符添加一个图标

$("#tag_list").select2({
    allowClear: true,
    placeholder: "<i class='icon-group'></i> &nbsp;&nbsp; inout your tags...",
    tags: ['a', 'b', 'c'],

});

但是它在select2中呈现纯文本，那么如何为占位符呈现html文本？

Answer 1

Select2自动转义HTML标记。

$("#tag_list").select2({
    allowClear: true,
    placeholder: "<i class='icon-group'></i> &nbsp;&nbsp; inout your tags...",
    tags: ['a', 'b', 'c'],
    escapeMarkup : function(markup) { return markup; } // let our custom formatter work
});

通过覆盖' scapeMarkup '参数，您可以强制其呈现纯HTML（通过按原样返回未转义的HTML）。这将同时影响占位符和选择数据（select2将占位符作为任何数据处理，从而将其转义）。

有关更多信息，请检查AJAX数据示例： 示例-Select2 | LoadingRemoteData

Answer 2

function format(state){

if (!state.id) {

return state.text; // optgroup

} else {

return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" + state.text;

}

}

$("#tag_list").select2({

    formatResult: format,

    formatSelection: format,

    escapeMarkup: function(m) { return m; }


});

http://ivaynberg.github.io/select2/