6

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

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

});

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

4

4 回答 4

6

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

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

有关更多信息，请查看 AJAX 数据示例： 示例 - Select2 | 加载远程数据

于 2016-07-11T19:02:07.657 回答
1

您可以指定占位符对象，而不仅仅是文本。这将呈现 HTML。

因此，在您的情况下，占位符可能看起来像这样。

$("#tag_list").select2({
    placeholder: {
        id: "-1",
        text: '<i class="icon-group"></i>  input your tags...'
    }
});
于 2018-07-03T05:54:29.610 回答
0

我猜你正在尝试使用字体真棒。他们在这里有一个带有 unicode 的备忘单： http ://fortawesome.github.io/Font-Awesome/cheatsheet/ 这可以放在 html 的占位符中：

<input name="username" placeholder="&#xf042;">

请记住在输入元素上添加：

font-family: 'FontAwesome'

并非所有浏览器都支持此功能，因此您可能希望使用 :before 元素进行回退。

.wrapper:before {
  font-family: 'FontAwesome';
  color:red;
  position:relative;
  content: "\f042";
}

最后的后备是实际使用这样的图像：

background-image: url(http://www.levenmetwater.nl/static/global/images/icon-search.png);
background-position: 10px center;
background-repeat: no-repeat;

如果您希望它删除焦点上的图标，请添加：

input:focus {
 background-position: -20px center;
 text-indent: 0;
 width: 50%;
}
于 2014-10-02T07:32:01.077 回答
-1 
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/

于 2013-07-27T09:23:45.903 回答