title: select2 multiple select as count in select2 search box
body: <p>Need to get just values and number of selection in multiple-select search box</p>
  
  <p>Please check first screenshot using select2 multiselect,
  <a href="https://i.stack.imgur.com/sUehg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sUehg.png" alt="enter image description here"></a></p>
  
  <p>I wants it like bellow one because the above selection is not looking good if I have multiple selectboxes as filters.</p>
  
  <p><a href="https://i.stack.imgur.com/lRGaZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lRGaZ.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/mwhgc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mwhgc.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>      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);
        });
    
    </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#error-type {
    width: 300px;
  }
  
  p {
    margin: 1em 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"&gt;&lt;/script&gt;
     
  &lt;p&gt;Selected IDs: &lt;span id="selectedIDs"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;select id="error-type" multiple&gt;
  &lt;/select&gt; 
   </code></pre>
  </div>
  </div>
  </p>