Choices.js — делаем универсальный custom select без зависимостей

Использование стандартных select-боксов скучно и уныло. А в 2017 так и вовсе неуважительно в отношении к пользователю. Предлагаем использовать плагин JS для кастомизации HTML Select.

В данном посте речь пойдет не о jQuery плагине, как Вы могли подумать. Всем известно, что лучше использовать инструмент без каких-либо зависимостей. Как раз им и является Choices.js. Это миниатюрная библиотека, которая с легкостью поможет Вам создать custom select и управлять выпадающими списками и элементами option в нем.

Автор плагина выделяет следующие преимущества своей работы:

• Легкий вес = высокая производительность;
• Нет зависимости от jQuery;
• Настраиваемая сортировка;
• Использование Flexible;
• Быстрый поиск\фильтрация;
• Доступный API;
• Возможность создавать свое оформление.

Инсталляция и использование плагина:

Подключаем файлы

<!-- Include base CSS (optional) -->
<link rel="stylesheet" href="assets/styles/css/base.min.css">
<!-- Include Choices CSS -->
<link rel="stylesheet" href="assets/styles/css/choices.min.css">
<!-- Include Choices JavaScript -->
<script src="/assets/scripts/dist/choices.min.js"></script>

Установки параметров в скрипте

// Pass multiple elements:
  const choices = new Choices(elements);
    
  // Pass single element:
  const choices = new Choices(element);
    
  // Pass reference
  const choices = new Choices('[data-trigger']);
  const choices = new Choices('.js-choice');

  // Pass jQuery element
  const choices = new Choices($('.js-choice')[0]);
    
   // Passing options (with default options)
  const choices = new Choices(elements, {
    items: [],
    choices: [],
    maxItemCount: -1,
    addItems: true,
    removeItems: true,
    removeItemButton: false,
    editItems: false,
    duplicateItems: true,
    delimiter: ',',
    paste: true,
    search: true,
    searchFloor: 1,
    position: 'auto',
    resetScrollPosition: true,
    regexFilter: null,
    shouldSort: true,
    sortFilter: () => {...},
    sortFields: ['label', 'value'],
    placeholder: true,
    placeholderValue: null,
    prependValue: null,
    appendValue: null,
    loadingText: 'Loading...',
    noResultsText: 'No results found',
    noChoicesText: 'No choices to choose from',
    itemSelectText: 'Press to select',
    addItemText: (value) => {
      return `Press Enter to add <b>"${value}"</b>`;
    },
    maxItemText: (maxItemCount) => {
      return `Only ${maxItemCount} values can be added.`;
    },
    classNames: {
        containerOuter: 'choices',
        containerInner: 'choices__inner',
        input: 'choices__input',
        inputCloned: 'choices__input--cloned',
        list: 'choices__list',
        listItems: 'choices__list--multiple',
        listSingle: 'choices__list--single',
        listDropdown: 'choices__list--dropdown',
        item: 'choices__item',
        itemSelectable: 'choices__item--selectable',
        itemDisabled: 'choices__item--disabled',
        itemChoice: 'choices__item--choice',
        group: 'choices__group',
        groupHeading : 'choices__heading',
        button: 'choices__button',
        activeState: 'is-active',
        focusState: 'is-focused',
        openState: 'is-open',
        disabledState: 'is-disabled',
        highlightedState: 'is-highlighted',
        hiddenState: 'is-hidden',
        flippedState: 'is-flipped',
        loadingState: 'is-loading',
    },
    // Choices uses the great Fuse library for searching. You
    // can find more options here: https://github.com/krisk/Fuse#options
    fuseOptions: {
      include: 'score',
    },
    callbackOnInit: null,
    callbackOnCreateTemplates: null,
  });

Как видно из кода выше, плагин очень гибкий и без труда может быть оформлен под Ваши личные потребности. Рекомендуем также ознакомиться со всеми опциями и методами csutom select. Всю информацию можно найти на страничке автора Github (ссылка выше).