Select2 + AJAX (Data from API)
I am using the contro select2 and I am trying to load my data through ajax, however I have not succeeded:
<select id="select2_sat_regimenfiscal" class="form-select form-select-lg" data-control="select2" data-allow-clear="true" data-placeholder="Régimen Fiscal">
<option></option>
</select>$("#select2_sat_regimenfiscal").select2({
language: "es",
theme: "bootstrap4",
multiple: false,
minimumResultsForSearch: 1,
allowClear: true,
ajax: {
url: "http://myapi.test:8181/api/sat/catalogos/regimenfiscal",
delay: 250,
dataType: "json",
processResults: function (data) {
return {
results: data
};
},
cache: true,
}
});and this is another example that does work, but my desire is that it works through the ajax load:
$.getJSON("http://myapi.test:8181/api/sat/catalogos/regimenfiscal", function (data) {
let options = data.map(item => `<option value="${item.id}">${item.text}</option>`);
$("#select2_sat_regimenfiscal").append(options);
});Could someone help me with the correction of my code or with some example of select2+ajax?
thank you very much
Replies (5)
Hi,
Metronic uses Select2 as it is with custom style only so all available ajax options and plugins features you can check in the plugin's official documentation here:
https://select2.org/data-sources/ajax
Regards,
Sean
The problem is that if I remove
data-control="select2"from the select it works without problem
...Obviously it works, but without the stylings of Metronic
Hi,
For custom data source you will need to apply your own styling.
Please provide us your select2 example code that works already with your remote data via https://gist.github.com/ and we will give you some direction regarding the styles.
Regards,
Sean
Everything is working, what I did was to initialize my select2 inside:
KTUtil.onDOMContentLoaded(function () {
//Initialize select2 here...
});
Thanks
Regards
