title: select2 display drop down images and text in wrap text mode
body: <p>I need to display text and images in a wrap text as shown below pic<a href="https://i.stack.imgur.com/R7c6E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R7c6E.png" alt=" image here" /></a></p>
  <p>After selection its not displaying the image, neither it wraps up (I want both image and wrapped chip to be displayed)</p>
  <p>I have tried with</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
  
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"&gt;&lt;/script&gt;
  
    &lt;label for="framework"&gt;&lt;b&gt;Framework&lt;/b&gt;&lt;/label&gt;
    &lt;select id="framework" name="framework" style="width:200px" class="full" multiple="multiple" data-placeholder="Select framework..."&gt;&lt;option&gt;&lt;/option&gt;&lt;/select&gt;
  
  
  &lt;script&gt;
  var frameworks = [{
      "id": "Name1||SubName1||Product1||Desc1||Spec1||https://image.shutterstock.com/image-photo/mountains-during-sunset-beautiful-natural-260nw-407021107.jpg",
      "text": "This is a product1 and new line"
  }, {
      "id": "Name2||SubName2||Product2||Desc2||Spec2||https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg",
      "text": "This is a product2 and new line"
  }, ]
  
  $('#framework').empty();
  $("#framework").select2({
      data: frameworks,
  
      templateResult: format,
      teamplateSelection: format,
      escapeMarkup: function(m) {
          return m;
      },
  
      placeholder: " Click here to select",
  }).val(null).trigger("change");
  
  function format(state) {
      if (!state.id) return state.text; // optgroup
      return '&lt;img src="' + state.id.split("||")[5] + '" style="vertical-align:middle; width: 50px; max-width: 100%; height: auto" /&gt;' + state.text;
  }
  
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>