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

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