CODEWITHSUNDEEP
javascriptjquery-select2
goxarad784
goxarad784

Reputation: 435

select2 not displaying options

I am using select2 library to send an ajax request:

I am getting the data back when I search for something but for some reason the results do not show up in the drop down.

    $('.js-example-basic-single').select2({
    ajax: {
    url:"/search/search",
    type:"POST",
    data: function (params) {
        // Query parameters will be ?search=[term]&type=public
        var query = {
            search: params.term,
            type: 'public'
          }
        return query;
      },
      processResults: function (data) {
        // Transforms the top-level key of the response object from 'items' to 'results'
        data = JSON.parse(data)
        console.log(data)
        return {
            results: data.studentNumber
          };
      }
      // Additional AJAX parameters go here; see the end of this chapter for the full code of this example
    }
  });

This is the data I can see in my console:

[
 {
   studentNumber :"12324"
 },
 {
   studentNumber :"12324"
 },

]

This is what the documentataion does:

$('#mySelect2').select2({
  ajax: {
    url: '/example/api',
    processResults: function (data) {
      // Transforms the top-level key of the response object from 'items' to 'results'
      return {
        results: data.items
      };
    }
  }
});

Upvotes: 0

Views: 733

Answers (1)

Kunal Kukreja
Kunal Kukreja

Reputation: 769

The data you have received after transformation is an array. Calling data. studentNumber would yield undefined since data is not an object.

Just return the data itself since the results is anyway expected to be an array.

In simple words, change this:

return {
    results: data. studentNumber
};

to

return {
    results: data
};

Upvotes: 1

Related Questions