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>

CSS

.select2-container--bootstrap-5 .select2--small.select2-selection {
    min-height: calc(1.5em + (0.5rem + 2px));
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}
.select2-container--bootstrap-5 .select2--small.select2-selection--single .select2-selection__clear,
.select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-selection__clear {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0.125rem 0.125rem;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23676a6d'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.5rem auto no-repeat;
}
.select2-container--bootstrap-5 .select2--small.select2-selection--single .select2-selection__clear:hover,
.select2-container--bootstrap-5 .select2--small.select2-selection--multiple .select2-selection__clear:hover {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.5rem auto no-repeat;
}
.select2-container--bootstrap-5 .select2--small.select2-dropdown .select2-search .select2-search__field {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}
.select2-container--bootstrap-5 .select2--small.select2-dropdown .select2-results__options .select2-results__option {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}
.select2-container--bootstrap-5 .select2--small.select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group {
    padding: 0.25rem 0.25rem;
}
.select2-container--bootstrap-5...

JavaScript

$(function() {
	$("#sel").select2({
  	theme: 'bootstrap-5'
  });
  $("#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
      };
    }
  	}
  });
})