Selec2：将ajax远程数据与templateSelection相结合

Question

我想在设置为使用远程数据时将特定数据加载到select2中。我有一个页面，其中包含一个用户可以更改的select2元素，但是如果他们使用url上的id选项访问该页面，我会尝试将该项目预先加载到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');
  });
}