JSFiddle - React, Tailwind, and code Playground

by adiioo7

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<link rel="stylesheet" href="https://select2.github.io/css/bootstrap.css">
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<select id="school_input" style='width:200px'>
</select>

JavaScript

function formatResults (results) {
    if (results.loading) return "Searching...";
    var markup = "<div class='select2-result'>" + results.school_name + "</div>";
    return markup;
}

function formatRepoSelection (results) {
      return results.school_name;
}

$('#school_input').select2({
  ajax: {
    url: "https://api.myjson.com/bins/15d345",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        school_name: params.term, 
      };
    },
    processResults: function (data, params) {
    	$(data.schools).each(function(){
      	this.id=this.school_id;
      });
      return {
        results: data.schools,
      };
    },
    cache: true
  },
  escapeMarkup: function (markup) { return markup; }, 
  minimumInputLength: 3,
  templateResult: formatResults,
  templateSelection: formatRepoSelection
});