select2 demo for BP

by ltdeta

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css">
<div id="mySelect2-info" class="select2-info">aktuell markiert: <span id="mySelect2_selected" class="select2_selected"></span></div>
<div id="mySelect2-parent">
<select id="mySelect2" class="select2">
  <option value="ss">Empty</option>
  <option value="hello">Hello World</option>
  <option value="test1">Test me</option>
  <option value="test2">Test me 12</option>
  <option value="test3">Test me 6576</option>
  <option value="test4">Stefan Kuhn</option>
  <option value="test5">Straßburger</option>
</select>
</div>

<div id="mySelect3-info">aktuell markiert: <span id="mySelect3_selected" class="select2_selected"></span></div>
<div id="mySelect3-parent">
<select id="mySelect3" class="select2">
  <option value="ss">Empty</option>
  <option value="hello">a-Hello World</option>
  <option value="-test1">-Test me</option>
  <option value="-test2">-Test me 12</option>
  <option value="-test3">-Test me 6576</option>
  <option value="-test4">-Stefan Kuhn</option>
  <option value="-test5">-Straßburger</option>
</select>
</div>

CSS

.select2-dropdown {
  position: static;
  z-index: 0;
  height: 200px;
}

.select2-info {
  margin: 10px 0;
  margin-left: 5px;
  color: green;
}
.select2_selected {
  color: blue;
}

JavaScript

function formatResult() {
  return 'null';
}

function formatState (state) {
  return null;
  if (!state.id) {
    return state.text;
  }

  var baseUrl = "/user/pages/images/flags";
  var $state = $(
    '<span><img class="img-flag" /> <span></span></span>'
  );

  // Use .text() instead of HTML string concatenation to avoid script injection issues
  $state.find("span").text(state.text);
  //$state.find("img").attr("src", baseUrl + "/" + state.element.value.toLowerCase() + ".png");

  return $state;
};

//templateSelection: formatState,
  $("#mySelect2").select2({
    closeOnSelect: false,
    dropdownParent: $("#mySelect2-parent"),
    multiple: true,
    allowClear: false
  });
  
  $("#mySelect2").on("select2:closing", function(event) {
    event.preventDefault();
    return false;
  });
  
  $("#mySelect2").on( 'select2:select select2:unselect', function (e) {
  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
    if (count>0) {
      //return "<li class='select2-selection__choice'>" + count + " options selected</li>";
      $('#mySelect2_selected').text(count);
    } else {
      $('#mySelect2_selected').text('');
    }
  })    
    
  });
  
  // ***************************** mySelect2 ***********************************************
  $("#mySelect2").on("select2:open", function(event) {
    $("#mySelect2-parent > .select2-container").css({
      display: "block",
      position: "static",
      top: 0,
      left: 0,
      width: 400
    });
    
    //$('mySelect2-parent1 > .select2-search__field').focus();
    
    //hide highlight listbox on start
    setTimeout(function(){
      $('#mySelect2-parent .select2-results__option').removeClass('select2-results__option--highlighted');
    },100);
    
  });
  
  $("#mySelect2").on('select2:clear', function (e) {
  	var data = e.params.data;
   ...