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%');