select2 MULTIPLE placeholder does not work

Question

I'm using the following piece of code to select item but placeholder already is not visible. I am using this example select2-bootstrap

   <div class="form-group" style="width:70px; height:44px;">
  <select class="form-control select2" multiple="multiple" id="select2" placeholder="cawky parky">
    <option>ahoj</option>
    <option>more</option>
    <option>ideme</option>
    <option>na </option>
    <option>pivo?</option>
  </select>
</div>
  <script src="//select2.github.io/select2/select2-3.4.2/select2.js"></script>

$(document).ready(function () {
$("#select2").select2({
    multiple:true,
    placeholder: "haha",
});

Answer 1

After hours of trying to figure this out I noticed that when the select is initially rendered the width of .select2-search__field is 0px. When I selected an option and then removed the option, the placeholder is shown and the width was about 1000px.

So to fix this I did the following:

$('.search-select-multiple').select2({
    dropdownAutoWidth: true,
    multiple: true,
    width: '100%',
    height: '30px',
    placeholder: "Select",
    allowClear: true
});
$('.select2-search__field').css('width', '100%');

Answer 2

2020 solution

The big issue here, is the first option of your select + your placeholder, being too big to fit in the dropdown. And so, select2 will force the placeholder to be width:0;.

This can be fixed with the following two lines of CSS, which will override this select2 "feature":

.select2-search--inline {
    display: contents; /*this will make the container disappear, making the child the one who sets the width of the element*/
}

.select2-search__field:placeholder-shown {
    width: 100% !important; /*makes the placeholder to be 100% of the width while there are no options selected*/
}

Be aware that the :placeholder-shown pseudo-class will not work in the oldest versions of some browsers, as well as on IE, as you can check here.

Answer 3

Add This In Your Script File:

$('select').select2({
    minimumResultsForSearch: -1,
    placeholder: function(){
        $(this).data('placeholder');
    }
}):

In HTML add This:

<select data-placeholder="Yours Placeholder" multiple>
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
    <option>Value 4</option>
    <option>Value 5</option>
</select>