JSFiddle - React, Tailwind, and code Playground

by javad ebrahimi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<p>
  <select id="sel2" style="width:500px" class="form-control" autocomplete="off"></select>
</p>

JavaScript

$.fn.select2.amd.require([
  'select2/utils', 'select2/data/ajax', 'select2/data/minimumInputLength'
], function(Utils, AjaxAdapter, MinimumInputLength) {

  function CustomAjaxAdapter($el, options) {
    CustomAjaxAdapter.__super__.constructor.call(this, $el, options);
  }

  Utils.Extend(CustomAjaxAdapter, AjaxAdapter);

  var initialValues = [{
    id: 909269,
    name: 'qwrap'
  }];

  CustomAjaxAdapter.prototype.current = function(callback) {
    var data = [];
    CustomAjaxAdapter.__super__.current.call(this, function(d) {
      data = d
    });
    _.each(initialValues, function(el) {
      data.push(el);
    })
    callback(data);
  }

  CustomAjaxAdapter.prototype.unselect = function(data) {
    initialValues = _.reject(initialValues, function(el) {
      return el.id == data.id
    });
    CustomAjaxAdapter.__super__.unselect.call(this, data);
  }

  $('#sel2').select2({
    ajax: {
      url: 'https://api.github.com/search/repositories',
      dataType: 'json',
      delay: 800,
      data: function(params) {
        return {
          q: params.term // search term
            ,
          page: params.page
        };
      },
      processResults: function(data) {
        return {
          results: data.items
        };
      }
    },
    multiple: true,
    minimumInputLength: 2,
    placeholder: 'Select something...',
    dataAdapter: Utils.Decorate(CustomAjaxAdapter, MinimumInputLength),
    templateResult: function(item) {
      return (item.loading) ? item.text : item.name;
    },
    templateSelection: function(item) {
      return item.name;
    }
  });
});