title: Select2 displays bold text correctly, but when typing, bold becomes the html tag
body: <p>I am using a <code>Select2</code> dropdown, and this is the <code>templateResult</code> function that I am using when defining the dropdown, in order to apply formatting to the results: </p>
  
  <pre><code>templateResult : function (item) {
              if (item.loading) {
                  return item.text;
              }
              var term = query.term || '';
              var $result = markMatch('&lt;span class="boldwrap"&gt;' + item.text.substring(0, item.text.indexOf(":")) + '&lt;/span&gt;' + item.text.substring(item.text.indexOf(":")), term);
              return $result;
  
          }
  </code></pre>
  
  <p>The <code>markMatch</code> function that I have in there, refers to a function I have defined somewhere else, that highlights the search results as you type. That works well and highlights as expected. </p>
  
  <p>My only problem is with the bold text that <code>$result</code> is supposed to return. </p>
  
  <p>It works fine and when opening the select menu, you see that the first words (up to the symbol ":") are showing in bold. </p>
  
  <p>The problem is that when I start typing in the search area of the menu, the bold text goes away and you can only see the html tag <code>&lt;span class... etc...</code></p>
  
  <p>How can I do, so the bold text appears not only when opening and browsing the select menu, but also when typing in the search box? I am not sure why with the highlighting function the css class works fine, but with the bold it doesn't. </p>
  
  <p>This is a <a href="https://jsfiddle.net/sx25kLng/" rel="nofollow">JSFiddle</a> with the issue. </p>
  
  <p><strong>CLARIFICATION:</strong> I don't want to simply remove the html tags. I want that the text remains bold while searching, without displaying the tags. If you simply remove them, the text is not bold anymore. </p>
  
  <p><strong>BEFORE/AFTER EXAMPLES:</strong> </p>
  
  <p>When opening the menu and scrolling, the text items should look like this (see fiddle below): </p>
  
  <p><strong>One:</strong> bla bla bla</p>
  
  <p><strong>Two:</strong> bla bla bla</p>
  
  <p><strong>Three:</strong> bla bla bla </p>
  
  <p>Whith my issue, when I start typing in the box, they become: </p>
  
  <p><code>&lt;span class="boldwrap"&gt;</code>One:<code>&lt;/span&gt;</code> bla bla bla</p>
  
  <p><code>&lt;span class="boldwrap"&gt;</code>Two:<code>&lt;/span&gt;</code> bla bla bla</p>
  
  <p><code>&lt;span class="boldwrap"&gt;</code>Three:<code>&lt;/span&gt;</code> bla bla bla</p>
  
  <p>And I would like them to remain like in the first step, with the initial word in bold: </p>
  
  <p><strong>One:</strong> bla bla bla</p>
  
  <p><strong>Two:</strong> bla bla bla</p>
  
  <p><strong>Three:</strong> bla bla bla </p>
  
  <p>The solutions that other users suggested me, just remove the html tags but do not keep the bold text, so with their code, the menu becomes just:</p>
  
  <p>One: bla bla bla</p>
  
  <p>Two: bla bla bla</p>
  
  <p>Three: bla bla bla </p>