select2 multiple select as count in select2 search box - jquery-select2

Question

Need to get just values and number of selection in multiple-select search box
Please check first screenshot using select2 multiselect,
I wants it like bellow one because the above selection is not looking good if I have multiple selectboxes as filters.
var elm = $('#error-type');
$(elm).select2({
placeholder: "Select features",
data: [
{ id: 0, text: "enhancement" },
{ id: 1, text: "bug" },
{ id: 2, text: "duplicate" },
{ id: 3, text: "invalid" },
{ id: 4, text: "wontfix" },
{ id: 5, text: "sdfsadf" },
{ id: 6, text: "ihfgdhfgdh" },
{ id: 7, text: "Vijaysinh" },
{ id: 8, text: "Parmar" },
{ id: 9, text: "invalid" },
{ id: 10, text: "Test device morel laravel" },
{ id: 11, text: "sky is blue" },
]
}).change(function () {
var selectedIDs = $.map($(elm).select2('data'), function (val, i) {
return val.id;
}).join(",");
$('#selectedIDs').text(selectedIDs);
});
#error-type {
width: 300px;
}
p {
margin: 1em 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<p>Selected IDs: <span id="selectedIDs"></span></p>
<select id="error-type" multiple>
</select>

Answer 1

Try using select2:close event
$('select').select2()
$('.select1').on('select2:close', function() {
let select = $(this)
$(this).next('span.select2').find('ul').html(function() {
let count = select.select2('data').length
return "<li>" + count + " options selected</li>"
})
})
$('.select2').on('select2:close', function() {
let select = $(this)
select.next('span.select2').find('ul').html(function() {
return "<li>" + $(select).val() + "</li>"
})
})
.select2-selection__rendered li {
margin: 6px 0px 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<select class="select1" multiple style="width:100%">
<option value="Alaska">Alaska</option>
<option value="Alaska">Alaska</option>
<option value="California">California</option>
<option value="Nevada">Nevada</option>
<option value="Oregon">Oregon</option>
<option value="Washington">Washington</option>
<option value="Arizona">Arizona</option>
</select>
<br/><br/>
<select class="select2" multiple style="width:100%">
<option value="Alaska">Alaska</option>
<option value="Alaska">Alaska</option>
<option value="California">California</option>
<option value="Nevada">Nevada</option>
<option value="Oregon">Oregon</option>
<option value="Washington">Washington</option>
<option value="Arizona">Arizona</option>
</select>
UPDATE (with search)
$('select').select2()
$('.select1').on('select2:close', function() {
let select = $(this),
ul = select.next('span.select2').find('ul');
ul.find('.select2-selection__choice').remove();
ul.prepend(function() {
let count = select.select2('data').length
return "<li class='select2-selection__choice'>" + count + " options selected</li>"
})
})
.select2-selection__rendered li {
margin: 6px 0px 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<select class="select1" multiple style="width:100%">
<option value="Alaska">Alaska</option>
<option value="Alaska">Alaska</option>
<option value="California">California</option>
<option value="Nevada">Nevada</option>
<option value="Oregon">Oregon</option>
<option value="Washington">Washington</option>
<option value="Arizona">Arizona</option>
</select>