多个选择上未转义的select2占位符 [英] Non-escaped select2 placeholder on multiple select
问题描述
我想我了解select2库中占位符的工作方式.
I think I understand how placeholders work regarding select2 library.
已经有一段时间困扰着我，如何在多个选择上使用非转义的占位符.
There is a thing bugging me for a while already, how to have non-escaped placeholder on multiple selects.
原因是我想在占位符处放置一个图标.
The reason is I like to place an icon at the placeholder.
单选使用附加的选项标签，并在select2选项对象上使用属性escapeMarkup.
Single selects uses an additional option tag and the property escapeMarkup at the select2 options object.
$('mySelector').select2({
escapeMarkup: function(markup){
return markup;
}
});
由于占位符放置在输入标签上，因此无法进行多次选择，因此html标记被转义，并且您获得了<i>标签而不是图标.
Nothing of that is possible at multiple selects since the placeholder is placed at an input tag, so html markup is escaped and you get the <i> tag instead of the icon.
有解决办法吗?
推荐答案
以您先前的评论作为参考:
Taking your previous comment as a reference:
"的想法是在占位符处放置一个超棒的字体图标， 防止select2转义，我得到了i标签 图标的
"the idea is to place a font awesome icon at the placeholder and preventing select2 from escaping it, and i'm getting the i tag instead of the icon"
...并且，如果我理解正确的话，您想在Select2元素的占位符上放置一个Font Awesome图标并将其保留在那里，对吗?
...and if I understood correctly, you want to place a Font Awesome icon on the Placeholder of the Select2 element and keep it there, correct?
检查以下代码，在其中插入包含Font Awesome图标(小飞机)的DIV并将其放置在用于搜索的Input顶部.即使您从选择"中选择了不同的项目(根据需要是多次选择")，该图标仍保留在占位符中，并且默认情况下它也包含文本.
Check the following code where I'm inserting a DIV that contains a Font Awesome icon (the little airplane) and placing it on top of the Input used for searching. Even when you select different items from the Select (is a Multiple Select as you needed) the icon remains in the placeholder and also it has a text by default.
请记住添加 class ="tab" ，以防您看不到图标.
Remember to add the class="tab" in case you don't see the Icon.
$(document).ready(function(){
$("#sel1").select2({
placeholder: 'Search here...',
allowClear: true
});
$(".select2-search.select2-search--inline").prepend("<div class='fab'></div>");
});
select {
width:300px;
}
.multi {
padding:10px;
font-family: FontAwesome, "Open Sans", Verdana, sans-serif;
font-style: normal;
font-weight: 600;
text-decoration: inherit;
}
.top {
position: absolute;
left: 0px; top:0px;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- select2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<!-- select2-bootstrap4-theme -->
<link href="https://raw.githack.com/ttskch/select2-bootstrap4-theme/master/dist/select2-bootstrap4.css" rel="stylesheet"> <!-- for live demo page -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
<div class="container-fluid" style="width: 100%;">
<select class="multi fab" multiple placeholder="" data-allow-clear="1" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<script>
</script>
</body>
</html>
这篇关于多个选择上未转义的select2占位符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
