JSFiddle - React, Tailwind, and code Playground

by orbitory

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select name="preRequisites" id="preRequisites" class="form-control" multiple data-data="2,4,9"></select>

CSS

#preRequisites {
  width: 100%;
}

JavaScript

$('#preRequisites').select2({
  minimumInputLength: 3,
  multiple: true,
  //theme: "bootstrap",
  templateResult: function(item) {
    return item.name + ' (' + item.code + ')';
  },
  templateSelection: function(item) {
    return item.name + ' (' + item.code + ')';
  },
  ajax: {
    url: 'https://api.myjson.com/bins/10pbwi', //fake, returns all matching query string
    dataType: 'json',
    type: "get",
    //delay: 100,
    processResults: function(data) {
      return {
        results: data
      };
    },
  },

});


var preRequisites = $('#preRequisites');

$.ajax({
  type: 'get',
  url: 'https://api.myjson.com/bins/lths2', //fake, returns only values to be initialized with
  data: {
    ids: preRequisites.data('data'),
  }

}).then(function(data) {

  console.log(data);

  jQuery.each(data, function(index, item) {
    console.log(item);
    var option = new Option((item.name + ' (' + item.code + ')'), item.id, true, true);

    preRequisites.append(option).trigger('change');

  });

  preRequisites.trigger({
    type: 'select2:select',
    params: {
      data: data
    }
  });

});