JSFiddle - React, Tailwind, and code Playground

by fulviocanducci

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<div class="form-group form-group-sm p-4">
<select type="text" id="sel" class="form-select form-select-sm">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
  <option value="5">Test 5</option>
</select>
</div>
<div class="col-md-12 mb-2 p-4">
  <label class="control-label" for="sel1">Cliente</label>
  <div class="input-group input-group-sm">
    <select id="sel1" class="form-select form-select-sm">
      <option value="1">Test 1</option>
      <option value="2">Test 2</option>
      <option value="3">Test 3</option>
      <option value="4">Test 4</option>
      <option value="5">Test 5</option>
    </select>
    <button class="btn btn-success btn-sm" type="button" data-bs-toggle="modal" 
            data-bs-target="#modalClient">
      <i class="bi bi-person"></i> Busca
    </button>        
  </div>
</div>
<div class="form-group m-4">
<select id="sel2" class="js-data-example-ajax form-select form-select-sm">  
</select>
</div>

JavaScript

$(function() {
	$("#sel").select2({
  	theme: 'bootstrap-5',
    selectionCssClass: "select2--small",
    dropdownCssClass: "select2--small",
  });
  $("#sel2").select2({
  	theme: 'bootstrap-5',
    selectionCssClass: "select2--small",
    dropdownCssClass: "select2--small",
  });
  $("#sel1").select2({
  	theme: 'bootstrap-5',
    selectionCssClass: "select2--small",
    dropdownCssClass: "select2--small",
    ajax: {
    	url: 'https://api.github.com/search/repositories',
    	dataType: 'json',
      data: function (params) {
      	var query = {
        	search: params.term,
          q: params.term,
        	type: 'public'
      	} 
        return query;
      },
      processResults: function (data) {
      const result = data.items.map(function(item){
      	return {
        	id: item.id,
          text: item.full_name
        }
      });
      return {
        results: result
      };
    }
  	}
  });
})