Select 2 with icons

[lelayof]

Hello,

We need to add font awesome icon before the text on the select 2 plug in (on a single select mode). Tha actual workaround is not really satisfactory : The font awesome class is concatened into the text and we recreate the select 2 object with a new formatResult/formatSelection parsing the text. We use an older version of the plug-in and came into this bug while upgrading it (formatResult seems to be templateResult now).

Is it possible to add this option to the plug in ? Maybe simply add a four optional field in the lov with the font awesome class and the plug in simply add it to the format result. Or add more complexity by allowing user defined function to be set in the templateResult/templateSelection option of the javascript Select 2 ?

Sorry, I am not sure it is the right place to ask since it is not really an issue.

[lelayof]

Can you give some feedback about the status of this request ? If needed, I could help to add the feature.

[nbuytaert1]

Sorry for the delay.

I'm not sure what the best approach is in this case. But it seems that you have a clear understanding of how the Select2 plugin works. Can you come up with a solution yourself? Feel free to create a pull request.

[rimblas]

I've added a Page Load Dynamic Action that defined the templateSelection and templateResult functions (the new version names for formatResult/formatSelection I believe) In my Page Load DA I have

$(this.affectedElements).select2({
  templateSelection: Select2formatColor,
  templateResult: Select2formatColor
});

My function looks like this:

// Used to display the color options on a Select2 dropdown
function Select2formatColor (color) {
  if (!color.id) { return $('<span class="color-option"/><span>' + color.text + '</span>'); }
  var $color = $(
    '<span class="color-option ' + color.element.value + '"/><span>' + color.text + '</span>'
  );
  return $color;
}

[lelayof]

It is our current workaroud to display the icon. The issue is we are recreating the select2 object without the parameter set in APEX losing the purpose of the plug-in (a simple select + importing select2 library would work). I am still trying to find the best way to implement it (not much space or attribute left by the way), but I cannot spend as much time on it as I would.

[nbuytaert1]

In the latest version of the Select2 APEX plugin (3.0.3), I created an Extra Options attribute which can be used to add any arbitrary Select2 options to the page item. Can't you solve the icon issue by using this Extra Options attribute?

[lelayof]

Thanks, I tested this and it works perfectly.

I added a third extra option otherwise the select2 was escaping the HTML tag : escapeMarkup: function(text) {return text;} // escape nothing.