result callback in select2 ajax

sina 0
Viewed 34

i want to add the result of api to my multiple select but the problem is it doesnt go to success or result callback (no log in results callback) what is the problem? select2 version is <4

$('#e1').select2({
    ajax: {
        dataType: "json",
        url: "http://192.168.1.5:8585/test.json",
        // data: function (data) {
        //  console.log("data");
        //  console.log(data);
        // },
        results: function (data) {
            console.log(data);
            return {
                results: data.data
            };
        }
    },
    multiple:true
});

HTML:

<input type="text" id="e1"/>
jquery-select2 jquery javascript
1 Answers

You need to return from the results method the format that select2 expects {id: "", text: "", selected: ...} aka:

[
  {id: "CA", text: "California"},
  ...,
  {id: "MA", text: "Massachusetts", selected: true}
]


$(() => {
  $(".js-data-example-ajax").select2({
    ajax: {
      url: "https://api.github.com/orgs/select2/repos",
      data: function(params) {
        return {
          q: params.term,
          page: params.page,
        }
      },
      results: function(data) {
        return {
          results: data.map(item => {
            return {
              id: item.id,
              text: item.name,
              selected: false // <- if you need
            }
          }),
        }
      },
    },
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@3.5.1/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@3.5.1/select2.css" rel="stylesheet" />


<div style="width: 50%;" class="js-data-example-ajax"></div>

Артем Комаров0
Related