SELECT2 AJAX not selecting results - Ember.js Ember Cli Custom Component

Question

The AJAX functionality of Select2 4.0.0 doesn't seem to be working. It displays the results from the AJAX however when you click on the a result item it does not select it. I have wasted hours on this any help would be appreciated.

The following code does not work:

var staticdata = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
self._select = self.$().select2({
  placeholder: self.get('placeholder'),
  tokenSeparators: [','],
  multiple: true,   
  ajax: {
    url: "http://localhost:9990/api/v1/users/",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    processResults: function (data, page) {
      return {
        results: staticdata
      };
    },
    cache: true
  }
});

However when I try it WITHOUT Ajax it works and the results are selecting into the input field:

var staticdata = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
self._select = self.$().select2({
  placeholder: self.get('placeholder'),
  tokenSeparators: [','],
  multiple: true,
  data: staticdata
});

Answer 1

So this issue was due to using select2 as custom ember component.

When you create an ember component you can either select an existing html tag e.g.

1. self.$('#selecttext').select2(...) 

Where the html tag is located in your ember cli location templates/components/select2-component.hbs:

<select id="selecttext" class=" form-control input-md select2-hidden-accessible" multiple="" tabindex="-1" aria-hidden="true">
</select>

OR alternatively just initialize the component it self using:

2. self.$().select2(...) 

When using approach 2. I am guessing select2 AJAX callback somehow loses the reference to select2 component. So that when you select a result from the list select2:selecting event is not generated and hence the result value is not selected.

I tested this using:

self._select.on("select2:selecting", function(e) { 
        alert('selecting');
    });

However when you use approach 1. ajax callback does NOT lose the reference to the select2 component and generates the "select2:selecting" event and works as expected with the results being able to be selected.

Hence this works:

didInsertElement: function() {
 var self = this;
 var staticdata = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
 self._select = self.$('#selecttext').select2({

    // note we are explicitly initialising select2 component on #selecttext

    placeholder: self.get('placeholder'),
    tokenSeparators: [','],
    multiple: true,
    tags: false,
    //data: staticdata
    ajax: {
         url: "http://localhost:9990/api/v1/users/",
         dataType: 'json',
         delay: 250,
         data: function (params) {
         return {
            q: params.term // search term
        };
    },

    processResults: function (data, page) {
        return {
            results: staticdata
        };
     },
    cache: true
    }
}); //select2 END
} //didInsertElement END