Select2 Search AJAX Not Working in Modal After Updating the Bootstrap and Jquery version

[noel_c_cadiz]

I updated the bootstrap and jquery to the latest version and select2 has problem

First Issue Is: the list appear behind the modal. I fixed this by setting the below CSS
.select2-dropdown {
z-index: 9001;
}

.select2-search {
  z-index: 9001;
}

After this, the list is showing.

Second Issue: I cannot enter text in the Search Input box. I went to check for solution online and it says to add this script so the parent is the modal.
$(document).ready(function() {
$(".js-example-basic-single").select2({
dropdownParent: $("#exampleModal")
});
});

It works, I can enter text now.

The main issue right now is, after adding the JS script above, the list is gone. The Ajax is not responding anymore. If I remove the JS script, it is working but I cannot enter text in the Search Input Box

Here’s the sample AJAX script,

$(’.js-example-basic-single’).select2({
ajax: {
url: [this is my URL],
dataType: ‘json’,
quietMillis: 100,
data: function (params) {
return {
search: params.term
};
},
results: function (data) {
var results = [];
$.each(data, function(index, item){
results.push({
id: item.id,
text: item.text
});
});
return {
results: results,
pagination: {
more: (params.page * 30) < results.total_count
}
};
},
cache: true
},
allowClear: true,
placeholder: ‘Select route’,
minimumResultsForSearch: 20

    });
}

I used these libraries for select2

I appreciate any help as I’ve been stuck with this issue for two days already.

Thank you.