Allow for "id" + 2 fields ("text" and "html") instead of just "id" and "text" fields

[lmsmartins]

Prerequisites

• [x] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• [ ] The issue still exists against the latest master branch of yii2-widget-select2.
• [ ] This is not an usage question. I confirm having read the widget documentation and demos.
• [ ] This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• [ ] This is not a source plugin (select2) issue. (Those should be directed to the plugin issues repo).
• [ ] I have attempted to find the simplest possible steps to reproduce the issue.
• [ ] I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

1. Add a value with "Mário" or "João" - The search filter won't work

UPDATE: There isn't any bug on the search filtering by default. The issue was I was trying to add a json string as the "text" element so I could use the formatTemplateResult option and put HTML on the select2 options.

UPDATE 2: Encoding issues when parsing the json - "M\u00e1rio" instead of "Mário".

UPDATE 3: Solved the filtering issue on the PHP encoding: json_encode( $text, JSON_UNESCAPED_UNICODE ), however, search also filters stuff like "

" or "

", etc... Perhaps the data array could allow for a sub array for each element with a "text" and "html" option? The select2 native widget allows this. In this way, we would have a field to present the select options and another field to filter the select options.

Would this be possible to implement?

Expected behavior and actual behavior

When I follow those steps, I see...

When adding HTML to the select options, the search also filters stuff like "div" or "p", etc... Perhaps the data array could allow for a sub array for each element with a "text" and "html" option? See this example of the select2 (https://jsfiddle.net/the94air/awzqtd4w/)

<select style="width: 50%"></select>

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;
   }
});

Environment

Browsers

• [x] Google Chrome
• [x] Mozilla Firefox
• [x] Internet Explorer
• [x] Safari

Operating System

• [x] Windows
• [x] Mac OS X
• [ ] Linux
• [ ] Mobile

Libraries

• jQuery version: 3.2.1
• yii2-widget-select2 version: 2.1.0

Isolating the problem

• [ ] This bug happens on the widget demos page
• [x] The bug happens consistently across all tested browsers
• [x] This bug happens when using yii2-widget-select2 without other plugins
• [ ] I can reproduce this bug in a jsbin

[lmsmartins]

UPDATE: There isn't any bug on the search filtering by default. The issue was I was trying to add a json string as the "text" element so I could use the formatTemplateResult option and put HTML on the select2 options.

UPDATE 2: Encoding issues when parsing the json - "M\u00e1rio" instead of "Mário".

Perhaps the data array could allow for a sub array for each element with a "text" and "html" options? The select2 native widget allows this. Would this be possible to be implemented?

[lmsmartins]

When adding HTML to the select options, the search also filters stuff like "div" or "p", etc... Perhaps the data array could allow for a sub array for each element with a "text" and "html" option? See this example of the select2 (https://jsfiddle.net/the94air/awzqtd4w/)

<select style="width: 50%"></select>

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;
   }
});

Would this be possible to implement?

[kartik-v]

Not sure why you are trying those various methods. This is possible by setting the widget options and pluginOptions intelligently to what you need. I would suggest you to try setting pluginOptions['data'] directly to the right associative array for your use case and try:

For example you can set for your use case:

use kartik\select2\Select2;
use yii\web\JsExpression;

echo Select::widget([
    'name' => 'custom-select',
    'data' => [], // empty dropdown options set by default (you can set it to what you need),
    'value' => '', // any initial value
    'pluginOptions' => [
        '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>'
            ],
        ],
        'templateResult' => new JsExpression("function template(data){return data.html}"),
        'escapeMarkup' => new JsExpression("function(m){return m}");
    ]
]);

Closing this. Let know if it solves your use case.

[lmsmartins]

Your suggestion does work. Thanks.

Having the "data" option on the widget, would make one easily believe it would override the pluginOptions's data field, but as you said, these are separate things.