Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

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&eacute;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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(