Как при выводе элементов в select2 добавить данные в option?

Question

[Diversia]

Использую плагин select2 для живого поиска через ajax:

<form method="post">
<div class="form-group">
	<label>Сценарист</label>
	<select class="itemPerson form-control" name="writer[]" id="itemWriter" multiple></select>
</div>
<button class="btn btn-danger" type="submit">Найти</button>
</form>

<script type="text/javascript">
$(document).ready(function() {

function formatState (state) {
            if (!state.id) { 
                return state.text; 
            }

            var $state = $(
                '<span>!' + state.text + '</span>'
            );
            return $state;
        };

	$('.itemPerson').select2({
		width: '100%',
		placeholder: 'Имя персоны',
		language: "ru",
		theme: "bootstrap",
		allowClear: true,
		minimumInputLength: 3,
		tokenSeparators: [',',';'],

		ajax: {
			url: "ajax.php?token=123",
			dataType: 'json',
			delay: 500,
                    data: function (params, page) {
                        return {
                            q: params.term,
                        };
                    },
			processResults: function (data) {
				return {
					results: data
				};
			},
			cache: true
		},
                templateResult: formatState,
                templateSelection: formatState
	});

});
</script>

ajax.php:

<?
$search = $_GET['q'];

CModule::IncludeModule('iblock');

	$arFilter = array(
		"IBLOCK_ID" => 2,
		array(
			"LOGIC" => "OR",
			array("NAME" => "%$search%"),
			array("PROPERTY_nameOther" => "%$search%"),
		),
	);

	$arSelect = Array("ID", "IBLOCK_ID", "NAME");
	$res = CIBlockElement::GetList(Array(), $arFilter, false, Array("nPageSize"=>50), $arSelect);

	$json = [];
	while($ob = $res->GetNextElement())
	{ 
		$arFields = $ob->GetFields();
		$json[] = ['id' => $arFields['ID'], 'text' => $arFields['NAME']];
	}

echo json_encode($json);
?>

Нужно добавить дополнительное поле к выводу $json[] - небольшое описание:

$json[] = ['id' => $arFields['ID'], 'text' => $name[0]." | ".$name[1], "detail" = > 'описание'];

Не могу разобраться, как это вывести в option. Например в bootstrap-select это делается просто:

<option value="145" data-subtext="Описание" title="Показывает в поле">Текст</option>

Но в bootstrap-select нет ajax.

Подскажите пожалуйста, как сделать в select2.

Answer 1

[Diversia]

Решение оказалось простым:

function formatState (state) {
		if (!state.id) { 
			return state.text; 
		}
	
		var $state = $(
			'<span>' + state.text + ' <small>(' + state.status + ')</small></span>'
		);
		return $state;
	};

	$('.itemPerson').select2({
		width: '100%',
		placeholder: 'Имя персоны',
		language: "ru",
		theme: "bootstrap",
		allowClear: true,
		//tags: true,
		minimumInputLength: 3,
		//closeOnSelect: false,
		tokenSeparators: [',',';'],

		ajax: {
			url: "personList.php?token=123",
			dataType: 'json',
			delay: 500,
			data: function (params, page) {
				return {
					q: params.term,
				};
			},
			processResults: function (data) {
				return {
					results: data
				};
			},
			cache: true
		},

		templateResult: formatState,
		templateSelection: formatState
	});

PHP:

$json[] = ['id' => $arFields['ID'], 'text' => $arFields['NAME'], 'status' => $status];