How to add html placeholder to select2?

Question

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'],

});

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

Answer 1

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

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).

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

Answer 2

You can specify a placeholder object, rather than only the text. This will render the HTML.

So in your case, the placeholder might look something like this.

$("#tag_list").select2({
    placeholder: {
        id: "-1",
        text: '<i class="icon-group"></i>  input your tags...'
    }
});