I'm having problem with the search when it Ajax load from json. Let's say I search for Yemen, the Yemen record won't be selected or highlighted.
Here's the full source, any setting not done correctly?
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" ></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/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>
Then for json file, sample data
{
"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"
}
]
}