Select2

NikitOS · 19 Feb 2022

Данная версия устарела. Новая версия на docs.teslacloud.net.

Базовое использование

HTML:

<xf:macro name="tc_clib_select2_macros::select2_includes" />

<div class="block">
    <div class="block-container">
        <div class="block-body">
            <xf:selectrow data-xf-init="tc-s2-select" label="OS" placeholder="Choose…">
                <xf:option></xf:option>
                <xf:optgroup label="Desktop">
                    <xf:option value="linux">Linux</xf:option>
                    <xf:option value="windows">Windows</xf:option>
                    <xf:option value="osx">OS X</xf:option>
                </xf:optgroup>
                <xf:optgroup label="Mobile">
                    <xf:option value="android">Android</xf:option>
                    <xf:option value="ios">IOS</xf:option>
                    <xf:option value="blackberry">BlackBerry</xf:option>
                </xf:optgroup>
                <xf:option value="other">Other</xf:option>
            </xf:selectrow>
        </div>
    </div>
</div>

Параметры TeslaCloud.S2Select (tc-s2-select)

Параметр	Значение по умолчанию	Описание	Настройка Select2
allowClear*	false	Если `true`, к полю выбора будет добавлена кнопка очистки.	allowClear
closeOnSelect*	true	Если `true`, выпадающий список будет закрыт после выбора.	closeOnSelect
dropdownAutoWidth	false		dropdownAutoWidth
dropdownCssClass		Дополнительные классы CSS для выпадающего списка. `:all:` добавит все классы, присутствующие в исходном элементе `<select>`.	dropdownCssClass
dropdownParent*	`$(document.body)`	Селектор для настройки положения выпадающего меню.	dropdownParent
maxLength*	0	Максимальное количество символов для поискового запроса. `maxLength` < 1 — без ограничений.	maximumInputLength
maxSelection	0	Максимальное количество опций, которые могут быть выбраны. `maxSelection` < 1 — без ограничений.	maximumSelectionLength
minLength*	0	Минимальное количество символов, необходимое для начала поиска.	minimumInputLength
minimumResultsForSearch*	0	Минимальное количество опций, необходимое для отображения окна поиска. `minimumResultsForSearch` < 0 — отключить поиск.	minimumResultsForSearch
selectionCssClass		Дополнительные классы CSS для контейнера выбора. `:all:` добавит все классы, присутствующие в исходном элементе `<select>`.	selectionCssClass
selectOnClose*	false	Если `true`, после закрытия выпадающего списка будет выбрана опция, выделенная перед закрытием.	selectOnClose
tags*	false	Если `true`, будет разрешено указание пользовательских значений.	tags
theme*	tc-clib_s2select		theme
tokens	`[',']`	Список символов, которые следует использовать в качестве разделителей токенов.	tokenSeparators
width*	100%	Настройка ширины контейнера.	width
scrollAfterSelect*	false		scrollAfterSelect
searchUrl		URL для поисковых запросов.
data*	null	Массив объектов опций.	data
resultTemplate**	`{{{styledText}}}`	Шаблон для отображения опции в выпадающем меню.
resultTemplateIconic**	`{{{iconHtml}}} {{{styledText}}}`	Шаблон для отображения варианта выбора с иконкой в выпадающем меню.
selectionTemplate***	`{{{text}}}`	Шаблон для отображения выбранной опции.
selectionTemplateIconic***	`{{{iconHtml}}} {{{text}}}`	Шаблон для отображения выбранной опции с иконкой.

* Подробности в документации Select2.
** См. Dropdown — Templating и Шаблонизация.
*** См. Selections — Templating и Шаблонизация.

NikitOS · 19 Feb 2022

Получение данных через AJAX
Кроме генерации списка опций из HTML, существует возможность загрузки данных через AJAX.
Для включения загрузки через AJAX необходимо задать URL для поисковых запросов в параметре searchUrl.

При изменении значения в поле поиска на указанный URL выполнится GET запрос со следующими параметрами:

Параметр	Описание
term	Текущий поисковый запрос в поле поиска.
q	Содержит то же, что и `term`.
_type	Тип запроса. Если выполняется запрос к первой странице — `query`, в противном случае — `query_append`.
page	Номер запрашиваемой страницы. Параметр присутствует только в запросах с пагинацией.

В ответ сервер должен вернуть ответ со следующим содержимым:

Ключ	Описание
results*	Массив с результатами поиска. См. ниже.
pagination	Пагинация. Единственный параметр — `more`, если `true`, при прокрутке до конца списка будет выполнен запрос к следующей странице.

Результаты поиска без группировки:

Ключ	Описание
id*	ID результата, который будет использоваться в качестве значения `value` опции. Любое значение, отличное от нуля.
text*	Текст опции.
selected	Если `true`, опция будет выбрана по умолчанию.
disabled	Если `true`, опция будет недоступна для выбора.
iconHtml	HTML-код для отображаемой иконки.
q	Текущий поисковый запрос. Используется для выделения совпадения.

Результаты поиска с группировкой:

Ключ	Описание
text*	Название группы.
children*	Массив с результатами поиска. То же, что и без группировки.

* Обязательно

Пример поиска пользователей

HTML:

<xf:macro name="tc_clib_select2_macros::select2_includes" />

<div class="block">
    <div class="block-container">
        <div class="block-body">
            <xf:selectrow data-xf-init="tc-s2-select"
                          label="Username" placeholder="Enter username…"
                          data-min-length="2" data-search-url="{{ link('members/find') }}" />
        </div>
    </div>
</div>

View attachment Member search.mp4

Пример поиска иконок Font Awesome

HTML:

<xf:macro name="tc_clib_select2_macros::select2_includes" />

<div class="block">
    <div class="block-container">
        <div class="block-body">
            <xf:selectrow data-xf-init="tc-s2-select" multiple="true"
                          label="Icon" placeholder="Find icon…"
                          data-min-length="2" data-search-url="{{ link('demo/find-fa-icon') }}" />
        </div>
    </div>
</div>

Код из контроллера:

PHP:

$results = [];

$query = $this->filter('q', 'str');
if ($query)
{
   foreach (XF::app()->data('XF:FontAwesome')->getIconMetadata() as $icon => $data)
   {
      if (
         stripos($icon, $query) === 0
         || stripos($data['label'], $query) === 0
      )
      {
         $results[] = [
            'id'   => $icon,
            'text' => $data['label'],
            'q'    => $query
         ];
      }
   }
}

$reply = $this->view();
$reply->setJsonParams([
   'results' => $results
]);

return $reply;

View attachment Icon search.mp4

NikitOS · 19 Feb 2022

Шаблонизация
Select2 позволяет изменить внешний вид выбранных опций и их списка в выпадающем меню. Для этого в TeslaCloud.S2Select возможно задать шаблоны, компилируемые библиотекой mustache.js.
Шаблоны задаются параметрами selectionTemplate и resultTemplate для выбранных опций и их списка в выпадающем меню соответственно. Шаблоны опций с иконками передаются параметрами с постфиксом Iconic (resultTemplateIconic и selectionTemplateIconic).

В шаблонах доступны следующие переменные:

Переменная	Описание
id	ID результата, который будет использоваться в качестве значения опции. Любое значение, отличное от нуля.
text	Текст опции без форматирования (в том виде, в каком он был в теле опции или при поиске через AJAX).
styledText	Отформатированный текст опции. При поиске через AJAX, совпадение с поисковым запросом будет выделено через `<strong>`.
selected	Если `true`, опция будет выбрана по умолчанию.
disabled	Если `true`, опция будет недоступна для выбора.
iconHtml	HTML-код для отображаемой иконки. Код иконки может быть задан из HTML с помощью атрибута `data-icon-html` в `<option>`.
q	Текущий поисковый запрос. Используется для выделения совпадения.

При поиске через AJAX могут присутствовать и другие переменные, переданные в ответе сервера.

Пример отображения иконок в списке, сгенерированном из HTML

HTML:

<xf:macro name="tc_clib_select2_macros::select2_includes" />

<div class="block">
    <div class="block-container">
        <div class="block-body">
            <xf:selectrow data-xf-init="tc-s2-select" label="OS" placeholder="Choose…">
                <xf:option></xf:option>
                <xf:optgroup label="Desktop">
                    <xf:option value="linux" data-icon-html="<i class='fab fa-linux fa-fw'></i>">Linux</xf:option>
                    <xf:option value="windows" data-icon-html="<i class='fab fa-windows fa-fw'></i>">Windows</xf:option>
                    <xf:option value="osx" data-icon-html="<i class='fab fa-apple fa-fw'></i>">OS X</xf:option>
                </xf:optgroup>
                <xf:optgroup label="Mobile">
                    <xf:option value="android" data-icon-html="<i class='fab fa-android fa-fw'></i>">Android</xf:option>
                    <xf:option value="ios" data-icon-html="<i class='fab fa-apple fa-fw'></i>">IOS</xf:option>
                    <xf:option value="blackberry" data-icon-html="<i class='fab fa-blackberry fa-fw'></i>">BlackBerry</xf:option>
                </xf:optgroup>
                <xf:option value="other">Other</xf:option>
            </xf:selectrow>
        </div>
    </div>
</div>

View attachment Iconic selection — HTML.mp4

Пример отображения иконок в списке при поиске через AJAX
Шаблон идентичен шаблону из данного примера. В коде контроллера к результатам поиска добавляется иконка:

PHP:

$results = [];

$query = $this->filter('q', 'str');
if ($query)
{
   foreach (XF::app()->data('XF:FontAwesome')->getIconMetadata() as $icon => $data)
   {
      if (
         stripos($icon, $query) === 0
         || stripos($data['label'], $query) === 0
      )
      {
         $results[] = [
            'id'       => $icon,
            'text'     => $data['label'],
            'iconHtml' => XF::app()->templater()->fontAwesome(
               ($data['is_brand'] ? 'fab ' : '') . 'fa-' . $icon
            ),
            'q'        => $query
         ];
      }
   }
}

$reply = $this->view();
$reply->setJsonParams([
   'results' => $results
]);

return $reply;

View attachment Iconic selection — AJAX.mp4

Select2

NikitOS

NikitOS

NikitOS