Фильтр по рубрикам

    Показать еще ... ()
    Главная / JavaScript / Плагины / Select 2 / Подключение и запуск

    Подключение и запуск

    Подключить плагин можно или с CDN или со своего сервера, если скачать и разместить его там. Думаю, что лучше это делать со своего сервера, потому что наблюдал ситуацию, когда прямо на глазах CDN на какое-то время отвалился и плагин перестал работать. И кто знает на скольких сайтах сразу.

    Но это все конечно имхо. Решать вам.

    Для своей работы плагин требует подключения jQuery. Поэтому смотрим, что jQuery подключена и подключена ДО подключения плагина Select2.

    Подключение плагина из локальной папки

    Скачать любую версию плагина можно отсюда.

    После того, как скачали дистрибутив, из него нам надо всего 2 файла: select2.min.css и select2.min.js.

    И тогда для обычного HTML подключение будет выглядеть примерно так:

    Скопировано 
    <link rel='stylesheet' href='select2.min.css'>
<script src='select2.min.js'></script>
    Показать код

    а для WordPress примерно так:

    Скопировано 
    wp_enqueue_style( 'select2', TEMPLATE_DIRECTORY_URL . '/select2.min.css' );
    
wp_enqueue_script( 'select2', TEMPLATE_DIRECTORY_URL . '/js/select2.min.js', array( 'jquery' ), '1.0', true );
    Показать код

    Что такое TEMPLATE_DIRECTORY_URL и как подключать скрипты и стили в WordPress читаем здесь.

    Подключение плагина с CDN

    Плагин доступен для подключения с двух CDN:  jsDelivr и cdnjs. С какого именно подключать - без разницы. Просто выбираете нужную версию плагина и копируете соответствующие ссылки.

    Пример подключения плагина версии 4.0.13:

    Скопировано 
    wp_enqueue_style( 'select2', 'https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css' );
    
wp_enqueue_script( 'select2', 'https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js', [ 'jquery' ], '4.0.13', true );
    
wp_enqueue_script( 'select2-ru', 'https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/i18n/ru.js', [ 'select2' ], '4.0.13', true );
    Показать код

    или

    Скопировано 
    wp_enqueue_style( 'select2', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css' );
    
wp_enqueue_script( 'select2', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js', [ 'jquery' ], '4.0.13', true );
    
wp_enqueue_script( 'select2-ru', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/i18n/ru.js', [ 'select2' ], '4.0.13', true );
    Показать код

    Последняя строка в обоих случаях нужна для русификации плагина. Дополнительных действий не требуется - плагин будет писать сообщения на русском.

    Подключение полной версии плагина

    Плагин выпускается в стандартной и полной (full) версии. Полная версия имеет немного более увеличенный функционал и соответственно больше весит. Четкого описания отличий этих сборок на сайте производителя нет, но полная версия в частности позволяет добавлять классы к полю выбранного значения и к самому выпадающему списку, что бывает нужно для разной стилизации списка на разных страницах сайта.

    Для того, чтобы вместо стандартной версии как в примерах выше подключить полную версию плагина, просто добавляем слово full в название подключаемого JS-файла. Остальные файлы (стили и перевод) не трогаем. То есть в строке подключения основного кода плагина вместо select2.min.js пишем select2.full.min.js.

    Запуск плагина

    После того, как плагин подключен, его необходимо запустить. Самый простой пример запуска без всяких параметров выглядит так:

    Скопировано 
    jQuery( 'select' ).select2();
    Показать код

    В результате, если не используются никакие стили и дополнительные настройки, получим такой вид выпадающего списка:

    Скопировано 
    <script src='//code.jquery.com/jquery-3.4.1.min.js'></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css'>
<script src='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js'></script>

<select>
	<option>Первое значение</option>
	<option>Второе значение</option>
	<option>Третье значение</option>
</select>

<script>
	jQuery( 'select' ).select2();
</script>
    Показать код

    А вот пример запуска с параметром, который уберет строку поиска из выпадающего списка:

    Скопировано 
    jQuery( 'select' ).select2( { minimumResultsForSearch: Infinity } );
    Показать код
    Скопировано 
    <script src='//code.jquery.com/jquery-3.4.1.min.js'></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css'>
<script src='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js'></script>

<select>
	<option>Первое значение</option>
	<option>Второе значение</option>
	<option>Третье значение</option>
</select>

<script>
	jQuery( 'select' ).select2({
		minimumResultsForSearch: Infinity
	});
</script>
    Показать код