select2 Font-Awesome + text in TemplateResult not working properly

I am attempting to use templateResult to format my select2 choices to include a fontawesome icon in front of the select text

unfortunately it is not working, even though i followed the documentation. The Font awesome icons display, but the text somehow lost in the translation

function formatFA(icon) { if (!icon.id) { return icon.text; } var $icon = $( '<i class="fa fa-circle" style="color:green"></i> ' + icon.text + ' ' ); return $icon; }; $('#gyr_ind').select2({ templateResult: formatFA });

here is the js fiddle of the code to see what I'm talking about in action

http://jsfiddle.net/46f9c7jy/

--------------Solutions-------------

icon.text is outside the <i> tag declaration like this $('<i></i>my-text'); which will not write the text inside the tag.

Something like this should work

var $icon = $('<i class="fa fa-circle"></i>')
.css({ 'color': icon.text })
.text(icon.text);

Here is a demo http://jsfiddle.net/dhirajbodicherla/46f9c7jy/3/

If the text has to be outside <i> then something like this should do

var $icon = $('<span></span>').append($('<i class="fa fa-circle"></i>').css({
'color': icon.text
})).append(icon.text);

Here is another demo http://jsfiddle.net/dhirajbodicherla/46f9c7jy/4/

Category:jquery select2 Time:2018-12-06 Views:0

Related post

Copyright (C) pcaskme.com, All Rights Reserved.

processed in 3.976 (s). 14 q(s)