title: Dynamically set select2 options with formatting
body: <p>Select2 v4.0 lets you add options to the dropdown dynamically by creating new <code>Option</code> objects and appending them.  How can you dynamically add data which has more than just an id and text?</p>
  
  <p>More specifically, if the select2 uses the <code>templateResult</code> configuration to style data with more than just plain text then adding <code>Option</code>s is too restrictive.  This callback only works with the library's own data format.</p>
  
  <pre><code>$('#select2').select2({
      templateResult: function(data) {
          return data.text + ' - ' + data.count;
      }
  });
  $('#select2').append(new Option('Item', 1, false, false));
  </code></pre>
  
  <p>I'd like to add more complex data when the dropdown is opened and template the results.</p>
  
  <p>I've tried some ugly workarounds, such as </p>
  
  <pre><code>var opt = new Option('Item', 1, false, false);
  opt.innerHTML = '&lt;div&gt;Item&lt;/div&gt;&lt;div&gt;Count&lt;/div&gt;';
  </code></pre>
  
  <p>But the HTML gets stripped and select2 displays plain text.</p>