Библиотека Select2 в дистрибутиве Cotonti Siena

Одним из самых любопытных новшеств CMS Cotonti Siena версии 0.9.27 станет появление в дистрибутиве jQuery-библиотеки Select2. Фактически это скриптовая замена традиционному и малофункциональному элементу формы select.

Несмотря на то, что Cotonti Siena развивается по принципу “от простого к сложного”, необходимость в наличии кастомизируемых селектов в формах присутствовала всегда. Особенно удручала архаичность и фактически недоступность селекта с атрибутом multiple. В результате, например, хэштеги для страницы вводились в текстовом режиме через запятую. Отсюда и опечатки и отсутствие проверок наличествующих тегов. Да и общее неудобство в какой-то степени присутствовало.

С появлением библиотеки Select2 все стало интереснее. Но прежде всего в формах редактирования страниц необходимо изменить разметку и TPL-логику. Вместо

<!-- BEGIN: TAGS -->
<tr>
	<td>{PAGEEDIT_TOP_TAGS}:</td>
	<td>{PAGEEDIT_FORM_TAGS} ({PAGEEDIT_TOP_TAGS_HINT})</td>
</tr>
<!-- END: TAGS -->

указываем

<!-- IF {PAGEEDIT_FORM_TAGS} -->
<tr>
	<td>{PHP.L.Tags}:</td>
	<td>{PAGEEDIT_FORM_TAGS}</td>
</tr>
<!-- ENDIF -->

И в файл с CSS-стилями добавим следующее правило:

.select2-container	{ width: 100%!important; }

Обязательно убедитесь в том, что в консоли отсутствуют ошибки!

Теперь при вводе хэштегов будет задействован Ajax, благодаря чему реализуется предиктивный ввод. Система будет подсказывать вам наличие в таблице cot_tags хэштегов, соответствующих вводимым символам.

В прошлый раз мы разбирали использование менеджера зависимостей Composer в Cotonti.