Select2 v5

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://rawgit.com/select2/select2/select2-5.x/dev/src/countries-data.js"></script>
<link rel="stylesheet" href="https://rawgit.com/select2/select2/select2-5.x/snapshot/201808291954/select25.css">
<script src="https://rawgit.com/select2/select2/select2-5.x/snapshot/201808291954/select25.js"></script>
<script src="https://rawgit.com/select2/select2/select2-5.x/snapshot/201808291954/select25-jquery-bridge.js"></script>
<p>
  <label for="before">Text Field Before Combo Control</label>:
  <input type="text" value="" id="before">
</p>
<p>
  <span>Countries:</span>
  <!-- for now label baked into the control via options -->
  <input type="hidden" name="countries" id="test" />
</p>
<p>
  <label for="after">Text Field After Combo Control</label>:
  <input type="text" value="" id="after">
</p>

JavaScript

var countries = window.select2countries;

  // query function to simulate ajax with delay and paged loading of results
  var query = (function() {

    var pageSize = 10;

    var previousTimeout = undefined;
    var previousReject = undefined;

    return function(search, page) {
      if (previousReject != undefined) {
        previousReject(new Error("cancelled"));
        window.clearTimeout(previousTimeout);
      }
      var delay = 100;

      return new Promise(function(resolve, reject) {
        previousReject = reject;
        previousTimeout = window.setTimeout(function() {
          var results = [];
          var count = 0;
          var offset = page * pageSize;
          for (var i = 0; i < countries.length; i++) {
            var country = countries[i];
            if (country.name.toLowerCase().indexOf(search.toLowerCase()) >= 0) {
              if (count >= offset) {
                results.push(country);
              }
              count++;
              if (count > offset + pageSize) {
                break;
              }
            }
          }
          previousTimeout = undefined;
          previousReject = undefined;
          resolve({
            values: results,
            more: results.length == pageSize
          })
        }, delay);
      });
    }
  })();

  $("#test").select25({
    style: {
      width: "500px"
    },
    values: [countries[26], countries[88]], // start with a few countries preselected
    itemId: "code",
    valueContent: "name",
    valueLabel: "name",
    resultContent: "name",
    valuesLabel: "Countries",
    searchLabel: "Add Country",
    minimumCharacters: 2,
    query: query
  });