javascript - Select2 displays bold text correctly, but when typing, bold becomes the html tag -

i using select2 dropdown, , templateresult function using when defining dropdown, in order apply formatting results:

templateresult : function (item) {             if (item.loading) {                 return item.text;             }             var term = query.term || '';             var $result = markmatch('<span class="boldwrap">' + item.text.substring(0, item.text.indexof(":")) + '</span>' + item.text.substring(item.text.indexof(":")), term);             return $result;          } 

the markmatch function have in there, refers function have defined somewhere else, highlights search results type. works , highlights expected.

my problem bold text $result supposed return.

it works fine , when opening select menu, see first words (up symbol ":") showing in bold.

the problem when start typing in search area of menu, bold text goes away , can see html tag <span class... etc...

how can do, bold text appears not when opening , browsing select menu, when typing in search box? not sure why highlighting function css class works fine, bold doesn't.

this jsfiddle issue.

clarification: don't want remove html tags. want text remains bold while searching, without displaying tags. if remove them, text not bold anymore.

before/after examples:

when opening menu , scrolling, text items should (see fiddle below):

one: bla bla bla

two: bla bla bla

three: bla bla bla

whith issue, when start typing in box, become:

<span class="boldwrap">one:</span> bla bla bla

<span class="boldwrap">two:</span> bla bla bla

<span class="boldwrap">three:</span> bla bla bla

and them remain in first step, initial word in bold:

one: bla bla bla

two: bla bla bla

three: bla bla bla

the solutions other users suggested me, remove html tags not keep bold text, code, menu becomes just:

one: bla bla bla

two: bla bla bla

three: bla bla bla

here have working fiddle : https://jsfiddle.net/sx25klng/3/, inserted html .text() method.