Selec2: объединение удаленных данных ajax с templateSelection

Question

Я хочу загрузить определенные данные в select2, в то время как настроено использование удаленных данных. У меня есть страница с элементом select2, который пользователь может изменить, но если он получил доступ к странице с помощью параметра id в URL, я пытаюсь предварительно загрузить этот элемент в select2.

Проблема в том, что возвращаемые данные с сервера - это объект, который используется для форматирования выбора на основе. И при загрузке, и при изменении значения это портит форматирование. Вот как выглядит код в JSFiddle.

var formatGroup = function(item) { return item.text; };
var formatGroupSelection = function(item) { 
    var markup = '<i class="fa fa-user'+
        ((item.type==1)?'':'s')+
    '"></i>&nbsp;'+
        (item.name || item.text)+
    '<span style="float: right; margin-right: 20px">'+
        (item.system || 'general')+
    '</span>';
  return markup;
};

var sampleData = [
{ id: 1, name: 'grp1', system: 'sys1', type: 1 },
{ id: 2, name: 'grp2', system: 'sys1', type: 2 },
{ id: 3, name: 'grp3', system: 'sys2', type: 1 },
{ id: 4, name: 'grp4', system: 'sys2', type: 2 }
];

var $select = jQuery('#group_edit');
$select.select2({
    ajax: {
    url: "/url/to/resource",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term,
        page: params.page,
        all: true,
        strict: !(jQuery('#inclusive').get()[0].checked)
      };
    },
    processResults: function (data, params) {
      params.page = params.page || 1;

      return {
        results: data.items,
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      };
    },
    cache: true
  },
  escapeMarkup: function (markup) { return markup; },
  minimumInputLength: 3,
  placeholder: 'select a group',
  allowClear: true,
  width: '100%',
  templateResult: formatGroup,
  templateSelection: formatGroupSelection
});

if (grpid != null) {
  var $option = jQuery('<option selected>Loading...</option>').val(grpid);
  $select.append($option).trigger('change');

  jQuery.ajax({ // make the request for the selected data object
    url: "url/to/resource?id=" + grpid,
    type: "get",
    dataType: 'json'
  }).then(function (data) {
    grp = data;
    jQuery('#inclusive').get()[0].checked = true;
    $option.text(data.name).val(data.id);
    $option.removeData();
    $select.trigger('change');
  });
}