Как отобразить html в вариантах select2

В в этом примере данных, загружаемых из удаленного источника, я могу видеть изображения и другие элементы html, представленные как параметры. Я хотел бы сделать то же самое, используя данные в локальном массиве. Я попытался создать массив, как описано в документации, и добавить его с помощью параметра data, но html отображается как открытый текст:

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="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css'; return false;" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select></select>

Ответы

Ответ 1

Если я не ошибаюсь, вы можете отображать только HTML, если вы зададите параметры templateResult и templateSelection и вернете им объект jQuery.

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,
      templateResult: function (d) { return $(d.text); },
      templateSelection: function (d) { return $(d.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>

Ответ 2

Хорошо, играл с этим некоторое время и нашел рабочее решение, поэтому я отвечу на свой собственный вопрос здесь.

Ключ для меня - это построить массив данных с содержимым для templateSelection и templateResult. Последнее отображает поиск в раскрывающемся списке, но любое многострочное содержимое не будет содержаться в элементе select2, поэтому его необходимо отобразить в строке (или, по крайней мере, в одной строке). Определение escapeMarkup в качестве опции позволяет переопределить основную функцию, которая обычно выделяет содержимое html.

Также важно определить атрибут title, поскольку в противном случае вы получите теги html в подсказке.

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>

Ответ 3

Просто вы можете добавить другое поле с html в свой массив данных и создать свой собственный шаблон с помощью опции templateResult, например:

`JSFiddle Demo`

var data = [{
   id: 0,
   text: 'enhancement',
   html: '<div style="color:green">enhancement</div>'
}, {
   id: 1,
   text: 'bug',
   html: '<div style="color:red">bug</div><div><small>This is some small text on a new line</small></div>'
}];

function template(data) {
    return data.html;
}

$("select").select2({
   data: data,
   templateResult: template,
   escapeMarkup: function(m) {
      return m;
   }
});