Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to render html in select2 options

In this example of data loaded from a remote source I can see images and other html elements rendered as options. I'd like to accomplish the same thing using data in a local array. I've tried building an array as described in the documentation and adding it with the data option but the html is rendered as plaintext:

var data = [    { id: 0, text: '<div style="color:green">enhancement</div>' },    { id: 1, text: '<div style="color:red">bug</div><div><small>This is some small text on a new line</small></div>' }];    $("select").select2({    data: data  })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>    <select></select>

How can I add html content to the select2 options?

like image 847
Eaten by a Grue Avatar asked Apr 01 '16 15:04

Eaten by a Grue


People also ask

How do I add options in Select2?

New options can be added to a Select2 control programmatically by creating a new Javascript Option object and appending it to the control: var data = { id: 1, text: 'Barn owl' }; var newOption = new Option(data. text, data.id, false, false); $('#mySelect2'). append(newOption).

What Select2 dropdown?

By default, Select2 will attach the dropdown to the end of the body and will absolutely position it to appear above or below the selection container. Select2 will display the dropdown above the container if there is not enough space below the container, but there is enough space above it.

What does Select2 () do?

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.


1 Answers

Ok, played with this for a while and found a working solution so I'll answer my own question here.

The key here for me is to build a data array with content for both templateSelection and templateResult. The latter renders fine in the dropdown but any multiline content will not be contained in the select2 element so needs to be displayed inline (or at least on a single line). Defining escapeMarkup as an option allows overriding of the core function which would normally strip out html content.

It's also important to define the title attribute since otherwise you'll end up with html tags in the tooltip.

var data = [{    id: 0,    text: '<div style="color:green">enhancement</div>',    html: '<div style="color:green">enhancement</div><div><b>Select2</b> supports custom themes using the theme option so you can style Select2 to match the rest of your application.</div>',    title: 'enchancement'  }, {    id: 1,    text: '<div style="color:red">bug</div>',    html: '<div style="color:red">bug</div><div><small>This is some small text on a new line</small></div>',    title: 'bug'  }];    $("select").select2({    data: data,    escapeMarkup: function(markup) {      return markup;    },    templateResult: function(data) {      return data.html;    },    templateSelection: function(data) {      return data.text;    }  })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>    <select></select>

Alternately, with a couple small CSS tweaks you can allow the full html option content to display inside of the select container without the need for the template callbacks:

var data = [{    id: 0,    text: '<div style="font-size: 1.2em; color:green">enhancement</div><div><b>Select2</b> supports custom themes using the theme option so you can style Select2 to match the rest of your application.</div>',    title: 'enchancement'  }, {    id: 1,    text: '<div style="color:red">bug</div><div><small>This is some small text on a new line</small></div>',    title: 'bug'  }];    $("select").select2({    data: data,    escapeMarkup: function(markup) {      return markup;    }  })
.select2-container .select2-selection--single {    height: auto!important;    padding: 5px 0;  }  .select2-container--default .select2-selection--single .select2-selection__rendered {    line-height: normal!important;  }  .select2-container .select2-selection--single .select2-selection__rendered {    white-space: normal!important;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>    <select style="width: 100%"></select>
like image 85
Eaten by a Grue Avatar answered Oct 11 '22 09:10

Eaten by a Grue