JSFiddle - React, Tailwind, and code Playground

by refan

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<select class="form-control" style="width: 100% !important" id="search_customers">
  <option></option>
</select>

JavaScript

$(function() {
  var jsonData = [{
    "id": "1",
    "text": "hasan"
  }, {
    "id": "2",
    "text": "irfan"
  }];

  $("#search_customers").select2({
    placeholder: 'Search for Customer',
    minimumInputLength: 1,
    multiple: false,
    allowClear: true,
    ajax: {
      url: '/echo/json/',
      dataType: 'json',
      delay: 500,
      type: "GET",
      quietMillis: 50,
      data: function(term) {
        console.log(term);
        return {
          term: term
        };
      },
      results: function(data) {
        console.log(data);
        return {
          results: $.map(data, function(item) {
            return {
              text: item.completeName,
              slug: item.slug,
              id: item.id
            }
          })
        };
      }
    }
  });
});