Extra parameter templateSelection

Hello i have this problem latest version of select 2

I inizialize select 2 with extra parameter:

let data = {
          id: this.caratteristica.CaratteristicaInfo.Id,
          text: this.caratteristica.CaratteristicaInfo.Nome,
          acronimo: this.caratteristica.CaratteristicaInfo.Acronimo,
          qualita: this.caratteristica.CaratteristicaInfo.Qualita
        };
var caratteristicaSelect = (<any>$(this.render.nativeElement));
var option = new Option(this.caratteristica.CaratteristicaInfo.Nome, this.caratteristica.CaratteristicaInfo.Id, true, true);
        
caratteristicaSelect.append(option).trigger('change');
caratteristicaSelect.trigger({
         type: 'select2:select',
         params: {
             data: data
         }
 });

but i don’t find this parameter on templateSelection so i can’t unable to render well data inside how do i ajax request.

[razvanioan]

+1

I’ve lost some time on this too (mostly creating a jsfiddle to demonstrate this)

I don’t have time to look over the source code to try to find a proper solution (and maybe propose a PR) but I’ve just crafted a custom / dirty hack on this, maybe somebody else will find this handy, it might be too late for @Toso82 after almost a year though

1. When manually selecting a dynamically created option, just append custom data as data attribute on it (the option). You can choose yourself what data you need in the template and how to pass it: multiple data attributes or only one as JSON string with all data like I did

let data = {
  id : 1,
  text : 'Dynamically created option',
  custom : 'parameter'
}

let option = new Option(data.text, data.id, true, true)

option.dataset.params = JSON.stringify(data)

$(select).append(option).trigger('change')

// I don't think that triggering custom `select2:select` event is needed anymore
/*$(select).trigger({
  type: 'select2:select',
  params : {
    data : data
  }
})*/

1. Inside template method, decode custom params if needed only

templateSelection : function (result, container) {
  // be sure `element` parameter is present (something selected) and data attribute configured (only when manually selected)
  if (result.element && 'params' in result.element.dataset) {
    try {
      // add parameters to `result` object
      Object.assign(result, JSON.parse(result.element.dataset.params))
    } catch (err) {
      console.error('Parameters not in JSON format')
    }
  }

  // you can safely use now `result.custom` parameter, from AJAX response or dynamically assigned
}

[joweste]

@Toso82 This is pretty much a dead issue tracker. I recommend you store the data in a global variable and look it up in the trigger callback.

I think it is not a good solution