JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
    <select class="js-data-example-ajax" multiple="multiple">
    </select>

CSS

.js-data-example-ajax {
    width: 200px;
}

JavaScript

$(".js-data-example-ajax").select2({
      tags:true,
      ajax: {
        url: "https://api.github.com/search/repositories",
        dataType: 'json',
        delay: 250,
        data: function (params) {
          return {
            q: params.term, // search term
            page: params.page
          };
        },
        processResults: function (data, page) {
          var newData = [];
            $.each(data.items, function (index, item) {
                newData.push({
                    id: item.id  //id part present in data 
                  , text: item.name  //string to be displayed
                });
            });
            return { results: newData };
        },
        cache: true
      },
      escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
      minimumInputLength: 1,
    //  templateResult: formatRepo, // omitted for brevity, see the source of this page
   //   templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
    });