title: How to apply a complex style to the selection of a Select2 component?
body: <p>Today I ran into a seemingly simple styling task when using the Select2 plugin, but it seems that the thing I want to achieve is more difficult than I thought. Here's what I want to do:</p>
  
  <p>The user should be able to choose a contact from a dropdown menu. Each contact entry should be displayed as the contact's profile picture and some data next to it. When collapsed, the dropdown should display the selected contact (i.e. the selected contact's profile picture and some data next to it) with a "dropdown triangle" next to it. In the expanded state, the dropdown should additionally display the other contacts, each with profile pic and data. Put simply, I want to do templating as described in the "Templating" example on <a href="http://ivaynberg.github.com/select2/" rel="nofollow">the select2 example page</a>, just with a more complex layout (profile picture on the left plus three stacked lines of text right next to the picture). </p>
  
  <p>I managed to apply the desired style to the <strong>results</strong> by using the <code>formatResult</code> select2 option, using a format function which wraps the image and data in styled div elements (note that I use Twitter Bootstrap's 'media' css class for styling):</p>
  
  <pre><code>function formatContactResult(item) {
   if(!item.id)
      return "No contact selected";
  
   var contact = JSON.parse(item.text);
   return "&lt;div class='media'&gt;&lt;a class='pull-left' href='#'&gt;&lt;img style='margin-top: 5px;' class='media-object' data-src='holder.js/64x64' src='" + contact.thumbUrl + "' /&gt;&lt;/a&gt;&lt;div class='media-body' style='font-size: 11px;'&gt;&lt;strong&gt;" + contact.displayName + "&lt;/strong&gt;&lt;br /&gt;" + contact.jobTitle + "&lt;/div&gt;&lt;/div&gt;"
  };
  </code></pre>
  
  <p>My problem: I can't figure out how to apply a complex layout like this to the <strong>selection</strong>. I'm aware of the <code>formatSelection</code> option, but the return value of the <code>formatSelection</code> function is wrapped in a <code>span</code> element which is not an appropriate wrapper for complex layouts. Although I know it's not valid, I tried to apply the same layout function I mentioned above, but that expectedly led to weird results (the desired layout being pushed far to the right).</p>
  
  <p>Does anyone have an clue on how I can achieve the described layout with select2?</p>
  
  <p>If it's of any interest, I'm using the Select2 plugin with Knockout.js and Twitter Bootstrap.</p>