jquery-select2jquery-select2-4ui-select2

select2 display drop down images and text in wrap text mode

I need to display text and images in a wrap text as shown below pic image here

After selection its not displaying the image, neither it wraps up (I want both image and wrapped chip to be displayed)

I have tried with

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

  <label for="framework"><b>Framework</b></label>
  <select id="framework" name="framework" style="width:200px" class="full" multiple="multiple" data-placeholder="Select framework..."><option></option></select>


<script>
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 '<img src="' + state.id.split("||")[5] + '" style="vertical-align:middle; width: 50px; max-width: 100%; height: auto" />' + state.text;
}

</script>

Solution

  • Using a custom flex layout for option

    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,
  templateSelection: 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 `<div class="select2-center-option">
              <span><img src="${(state.id.split("||")[5])}"/></span>
              <span>${state.text}</span>
          </div>`
}
    .select2-container .select2-selection--multiple .select2-selection__rendered {
  white-space: break-spaces!important;
}

.select2-center-option,
.select2-selection__choice {
  display: flex;
  align-items: center;
  gap: 5px;
}

.select2-center-option img {
  width: 50px;
  max-width: 100%;
  height: auto;
  margin-right: 5px;
}
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<label for="framework"><b>Framework</b></label>
<select id="framework" name="framework" style="width:200px" class="full" multiple="multiple" data-placeholder="Select framework...">
  <option></option>
</select>