JSFiddle - React, Tailwind, and code Playground

by Milousek

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>
<div id="my_GEIS_div" class="container_form">
		<select id="geis_select_form" data-id_carrier="3" class="branches">
				<option value=""></option>
		</select>
</div>

CSS

.select2-selection--single .extended, .select2-selection--single .service, .select2-selection--single .parking, .select2-selection--single .atm, .select2-selection--single .openingHours {
    margin-top: 3px;
}
#my_GEIS_div .select2-selection--single .name {
    width: 15%;
    min-width: 120px;
}
.selectItem .address, .select2-selection__choice .address, .select2-selection--single .address, .select2-container .select2-dropdown .select2-results li .address {
    width: 50%;
    word-wrap: break-word;
    /* min-width: 248px; */
}
.selectItem .item, .select2-selection__choice .item, .select2-selection--single .item, .select2-container .select2-dropdown .select2-results li .item, .selectItem .name, .select2-selection__choice .name, .select2-selection--single .name, .selectItem .address, .select2-selection__choice .address, .select2-selection--single .address, .select2-container .select2-dropdown .select2-results li .address, .selectItem .tooltipIcons, .select2-selection__choice .tooltipIcons, .select2-selection--single .tooltipIcons, .select2-container .select2-dropdown .select2-results li .tooltipIcons {
    float: left;
    color: #535353;
    font-size: 11px;
    margin-right: 5px;
    overflow: hidden;
}
.selectItem .item,
.select2-selection__choice .item,
.select2-selection--single .item,
.select2-container .select2-dropdown .select2-results li .item,
.selectItem .name,
.select2-selection__choice .name,
.select2-selection--single .name,
.selectItem .address,
.select2-selection__choice .address,
.select2-selection--single .address,
.select2-container .select2-dropdown .select2-results li .address,
.selectItem .tooltipIcons,
.select2-selection__choice .tooltipIcons,
.select2-selection--single .tooltipIcons,
.select2-container .select2-dropdown .select2-results li .tooltipIcons{
	float: left;
	color: #535353;
	font-size: 11px;
	margin-right: 5px;
	overflow: hidden;
}

@media (max-width: 1000px) {
	.select2-selection--single .city {
		display: none...

JavaScript

var search;
		var instance = new Mark(".select2-results");
		var select_form = $("#geis_select_form");
    var text_placeholder = 'Select .....';

		select_form.select2({
			ajax: {
				url: 'https://testps-1-6-1-18.prestamoduleshop.com/modules/pms_geis_service_complet/ajax.php',
				dataType: "json",
				delay: 250,
				data: function (params) {
					search = params.term;
					return {
						action: 'getBranches',
						q: params.term,
						page: params.page,
						country: 'CZ',
						limit: 30
					};
				},
				processResults: function (data, params) {
					params.page = params.page || 0;

					if(document.getElementById("count_GEIS") !== null)
						$('#count_GEIS').html('('+ data.total_count +')');
					else
						$('span .select2-search--dropdown').append('<span id="count_GEIS">('+ data.total_count +')</span>');

					return {
						results: $.map(data.branches, function (item) {
							return {
								id: item.id,
								idGP: item.idGP,
								name: item.name,
								city: item.city,
								street: item.street,
								postcode: item.postcode,
								phone: item.phone,
								mapUrl: item.mapUrl
							}
						}),
						pagination: {
						  more: (params.page * 30) < data.total_count
						}
					};
				},
				complete: function () {
					if (search !== undefined) {
						setTimeout(function () {
							instance.mark(search);
						}, 100);
					}
				}
			},
			width: '98%',
			templateResult: function (data) {
				return self.selectTemplate(data);
			},
			templateSelection: function (data) {

				if (!data || data.id === '') {
						return text_placeholder;
				}

				return selectTemplate(data);
			}
		})
		.on({
			'select2:select': function (e) {
				//save data ......
			}
		});
 


selectTemplate = function (data)
{
		var id = Number(data.id);
		var idGP = data.idGP;
		var city = data.city;
		var street = data.street;
		var name = data.name;
		var mapUrl = data.mapUrl;
		var postcode = data.postcode;

		if (id) {
			return $(
				"<div...