I'm encountering an issue with the search functionality when it uses Ajax to load data from a JSON file. For example, if I search for Yemen, the record for Yemen does not get selected or highlighted properly.
Here is the complete source code - could there be a misconfiguration somewhere?
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" ></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a1acacb7b0b7b1a2b883edf3fadce9eee2">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
jQuery(document).ready(function() {
$('#allowedCountries').select2({
placeholder: 'Select allowed countries',
allowClear:true,
tokenSeparators: [',', ' '],
ajax: {
dataType : "json",
url : "countries2.json",
},
});
});
</script>
</head>
<body>
for select2<Br>
<div style="width:100%">
<select name="allowedCountries" class="js-states form-control" id="allowedCountries"><option></option></select>
</div>
</body>
</html>
And here is a sample of the JSON file used as the data source:
{
"results": [
{
"id": 1,
"text": "Afghanistan"
},
{
"id": 2,
"text": "Aland Islands"
},
{
"id": 3,
"text": "Albania"
},
{
"id": 245,
"text": "Yemen"
},
{
"id": 246,
"text": "Zambia"
},
{
"id": 247,
"text": "Zimbabwe"
}
]
}