如何将HTML占位符添加到select2? [英] How to add html placeholder to select2?

问题描述

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

I want to add one icon to placeholder like this

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

});

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

But it renders plain text in select2, so how to render html text for placeholder?

推荐答案

Select2自动转义HTML标记.

Select2 automatically escapes HTML markup.

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

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

By overriding the 'escapeMarkup' parameter you can force it to render plain HTML instead (by returning the unescaped HTML as is). This will affect both the placeholder AND the select data (select2 handles the placeholder as any data, thus escaping it).

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

For more information, check the AJAX data example: Examples - Select2 | LoadingRemoteData

这篇关于如何将HTML占位符添加到select2?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！