select2 多个选择作为 select2 搜索框中的计数

Question

需要在多选搜索框中仅获取值和选择数量

请使用 select2 多选检查第一个屏幕截图，

我想要它像下面这样，因为如果我有多个选择框作为过滤器，上面的选择看起来不太好。

      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

尝试使用select2:close事件

$('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>

更新（带搜索）

$('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>