如何将html占位符添加到select2？答案

【问题标题】：How to add html placeholder to select2?如何将html占位符添加到select2？
【发布时间】：2013-07-27 08:57:09
【问题描述】：

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

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

});

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

【问题讨论】：

去掉引号有用吗？另外，如果可能的话，请在小提琴中发布您的代码。

标签： placeholder jquery-select2

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

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

有关详细信息，请查看 AJAX 数据示例： Examples - Select2 | LoadingRemoteData

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

我猜你正在尝试使用 font-awesome。他们在这里有一个带有 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%;
}

【讨论】：

【解决方案4】：

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/

【讨论】：