web-dev-qa-db-ja.com

select2オプションでhtmlをレンダリングする方法

リモートソースからロードされたデータの この例 では、オプションとしてレンダリングされた画像やその他の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="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>

Select2オプションにHTMLコンテンツを追加するにはどうすればよいですか？

jqueryhtmljquery-select2jquery-select2-4
26
billynoah

OK、しばらくこれで遊んで、実用的な解決策を見つけたので、ここで自分の質問に答えます。

ここで重要なのは、templateSelectionとtemplateResultの両方のコンテンツを含むデータ配列を作成することです。後者はドロップダウンで検索をレンダリングしますが、複数行のコンテンツはselect2要素に含まれないため、インラインで（または少なくとも1行で）表示する必要があります。 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>

または、いくつかの小さなCSS調整により、テンプレートコールバックを必要とせずに、完全なhtmlオプションコンテンツを選択コンテ​​ナー内に表示できます。

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>
25
billynoah

間違っていない場合は、templateResultオプションとtemplateSelectionオプションを設定してjQueryオブジェクトを返す場合にのみ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,
      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>
27
apokryfos

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;
   }
});
9
Abdalla Arbab

別の例は次のように定義されます

function template(data) {
    if ($(data.html).length === 0) {
        return data.text;
    }
    return $(data.html);
}

$("select").select2({
   ajax: {
        url: 'routeurl',
        dataType: 'json',
        type: 'POST',
        processResults: function(data) {
            return {
                results: data
            };
        },
        cache: true
    },
    allowClear: true,
    placeholder: 'Select at least one element',
    templateResult: template,
    templateSelection: template
});

Json形式のエンドポイント結果

[{
   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>'
}, {
   id: 2,
   text: 'success',
   html: 'Success'
}]
4
Erick D. Machado Alvarez