Select2 load default data in multiple select with ajax

I’m using select2 4.0.0.

<select id="mySelect" class="form-control" multiple="multiple"></select>
$('#mySelect').select2({
      width: '100%',
      data: data,
      ajax: {
           url: function() { return 'myendpoint' ; },
           dataType: 'json',
           delay: 250,
           data: function (params) {
               return {
                   where: {'title' : '%' + params.term + '%'}, 
                       page: params.page
               };
          },
          processResults: function (data, params) {

            params.page = params.page || 1;
            return {
                results: $.map(data.message.data, function (item) {
                     return {
                          text: item.values.title,
                          id: item.values.id
                     }
                }),
                pagination: {
                     more: (params.page * 30) < data.total_count
                   }
               };
           },
           cache: true
           },
           minimumInputLength: 1,

       }).val(ids).trigger('change');

This is what i’m tring to do but it seems that it overrides data i’m passing during the inizialization. If I remove the ajax everything seems to work right. My data is an array of object:

[
    { id: '1', text: 'example' }
]

Instead my ids is an array of id [1].

I checkout some other issues in stackoverflow, but others has some different version and use initSelection but it seems don’t work in select2 4.0.0.

Where i’m wrong with this? Thanks.

[danhorton7]

@arkid something like this

$('.q').select2({
		ajax: {
		  url: '/api/usersearch',
		  dataType: 'json',
		  delay:300,
		  minimumInputLength: 3
		},
		placeholder: 'Search for a user to assign to'
	  });
	  // Fetch the preselected item, and add to the control
	var userSelect = $('.q');
	$.ajax({
		type: 'GET',
		url: '/api/usersearch/tasks/' + event_id
	}).then(function (data) {
		// create the option and append to Select2
		data.results.forEach(function(d) {
			var option = new Option(d.text, d.id, true, true);
			userSelect.append(option).trigger('change');
		});

		// manually trigger the `select2:select` event
		userSelect.trigger({
			type: 'select2:select',
			params: {
				data: data
			}
		});
});

[hddung89]

@danhorton7 tks for save my day ❤️