Non-escaped select2 placeholder on multiple select

Asked 9/2, 2020 at 21:20 Answered 20/2, 2020 at 15:23

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.

Single selects uses an additional option tag and the property escapeMarkup at the select2 options object.

$('mySelector').select2({
    escapeMarkup: function(markup){
        return markup;
    }
});

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.

Is there a workarund for this?

Delamare answered 9/2, 2020 at 21:20 Comment(1)

Did you test my solution below? – Uncircumcision 25/2, 2020 at 14:23

@Marcos i have done some solution regarding placeholder regarding select2 library.

<select class="select2 selectPlaceholder" multiple="multiple"></select>

<script>
  $(".selectPlaceholder").select2({
    placeholder: "Select Product",
    allowClear: true
  });
</script>

Optional

allowClear: true

Please let me know if i am right because i got your question but still i have some doubt understanding Que.

Mandiemandingo answered 10/2, 2020 at 13:40 Comment(3)

Nop, 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 – Delamare 15/2, 2020 at 22:4

please Refer this Link: #35405769 It might be Helpful – Mandiemandingo 17/2, 2020 at 9:2

take a minute and read the question again, that link lead to an example of a select that isn't multiple – Delamare 18/2, 2020 at 23:48

Taking your previous comment as a reference:

"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"

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

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.

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'>&#xf374;</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>

Uncircumcision answered 20/2, 2020 at 15:23 Comment(0)

Recommended topics

Hot tags