HTML colors and fonts does not work if Lazy Load = FALSE

[ScottHollows]

Summary

HTML colors and fonts are begin stripped from the drop list display text if LAZY LOAD = FALSE The correct behaviour is the HTML should be left as is

Description

I want to display the drop down values with mixed fonts, colours, bold etc

This works correctly if LAZY LOAD = TRUE

If I switch off LAZY LOAD, the colours and fonts are stripped back to plain text

Steps to reproduce

1) create a Select2 Item 2) Leave LazyLoad off (this is the default) 3) Use this SQL Query. It includes HTML text to show bold red text for "Out of Stock"

select name, id from (
          (select 'Paper'     name ,1 id from dual)
union all (select 'Pen <font size="5" color="red"><b>Out of Stock</b></font>'  ,2 from dual)
union all (select 'Ruler'   ,3 from dual)
union all (select 'Stapler' ,4 from dual)
)

4) Run the page.
The red bold text has been stripped to plain text This is the incorrect behaviour

5) edit the page and set LAZY LOAD = TRUE for the Select2 item

6) Run the page. The red bold text now correctly appears This is the correct behaviour

Request

Please change so the colours and fonts are never stripped out, as per LAZY LOAD = TRUE

Urgency

This is probably a low priority for other people, it is a high priority for me as I need to use HTML data tags to store an extra values in the display text. When the value is changed I use Javascript to get the value from the text. Unfortunately the extra value is getting stripped out of the text when the colours and fonts are stripped out.

Workaround

Enable LAZY LOADING although this is not appropriate for list items that have a small number of values

[rimblas]

@ScottHollows have you played with the templateSelection & templateResult?

In the "Extra Options" field you can specify a function to manipulate the values and format them. For example:

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

Final result: