Настройка языковых параметров

В библиотеке Choices.js локализация интерфейса реализуется через объект i18n, который передаётся в параметры и переопределяет стандартные текстовые строки. Все текстовые элементы, отображаемые пользователю (подсказки, сообщения об отсутствии результатов, плейсхолдеры и состояния загрузки), централизованы и могут быть заменены без изменения логики работы компонента.

Базовая форма конфигурации выглядит как часть объекта инициализации:

const choices = new Choices(element, {
  i18n: {
    noResults: 'Результаты не найдены',
    noChoices: 'Нет доступных вариантов',
    itemSelectText: 'Нажмите для выбора',
    loadingText: 'Загрузка...',
    maxItemText: (maxItemCount) => {
      return `Можно выбрать только ${maxItemCount} элементов`;
    },
    addItemText: (value) => {
      return `Нажмите Enter для добавления <b>${value}</b>`;
    },
    removeItemButtonTitle: 'Удалить элемент',
  }
});

Каждое поле i18n соответствует конкретному текстовому состоянию интерфейса. Значения могут быть строками или функциями, возвращающими строку.

Основные ключи локализации

Сообщения состояния списка

noResults определяет текст, отображаемый при отсутствии совпадений в фильтре:

noResults: 'Ничего не найдено'

noChoices используется, когда список полностью пуст:

noChoices: 'Нет доступных значений'

Эти строки активируются в разных контекстах: первая — при поиске, вторая — при отсутствии данных.

Информационные подсказки

itemSelectText задаёт подсказку для элементов списка:

itemSelectText: 'Выбрать'

В режиме множественного выбора этот текст помогает объяснить доступное действие для каждого элемента.

Состояние загрузки

loadingText используется при асинхронной подгрузке данных:

loadingText: 'Загрузка данных...'

В сочетании с setChoices и удалёнными источниками данных этот параметр становится частью UX-индикации состояния запроса.

Динамические текстовые функции

Choices.js допускает использование функций вместо строк, что позволяет формировать сообщения на основе параметров состояния компонента.

Ограничение количества выбранных элементов

maxItemText: (maxItemCount) => {
  return `Достигнут лимит: ${maxItemCount}`;
}

Функция получает число максимально допустимых элементов и возвращает локализованную строку.

Добавление нового элемента

addItemText: (value) => {
  return `Добавить значение: ${value}`;
}

Функция получает ввод пользователя и позволяет динамически формировать подсказку, включая значение, введённое в поле.

Кнопки и действия элементов

Удаление элементов

removeItemButtonTitle: 'Удалить'

Этот параметр влияет на атрибут title кнопки удаления выбранного элемента. Он особенно важен для доступности и скринридеров.

Текст выбора элемента

В некоторых конфигурациях используется кастомизация поведения выбора через клавиатуру:

itemSelectText: 'Нажать для выбора'

Этот текст отображается как вспомогательная подсказка при фокусе на элементе.

Локализация и доступность

Языковые параметры тесно связаны с доступностью интерфейса. Choices.js использует i18n не только для визуального текста, но и для ARIA-ориентированных подсказок.

Пример влияния на доступность:

  • removeItemButtonTitle попадает в aria-label
  • itemSelectText используется как вспомогательное описание действия
  • noResults озвучивается скринридерами при пустом результате поиска

Корректная локализация напрямую влияет на поведение assistive technologies.

Подключение нескольких языков

Структура i18n позволяет формировать наборы переводов для разных языков и подменять их при инициализации.

const translations = {
  ru: {
    noResults: 'Ничего не найдено',
    noChoices: 'Нет вариантов',
    itemSelectText: 'Выбрать',
  },
  en: {
    noResults: 'No results found',
    noChoices: 'No choices available',
    itemSelectText: 'Press to select',
  }
};

Далее язык выбирается при создании экземпляра:

const lang = 'ru';

const choices = new Choices(element, {
  i18n: translations[lang]
});

Изменение языка во время работы

Choices.js не имеет встроенного глобального переключателя языка, поэтому обновление локализации реализуется через пересоздание экземпляра или обновление настроек.

Пересоздание экземпляра

choices.destroy();

const newChoices = new Choices(element, {
  i18n: translations['en']
});

Этот способ гарантирует полное обновление всех текстов интерфейса.

Частичное обновление через setChoices

При динамической работе с данными можно комбинировать локализацию с обновлением списка:

choices.setChoices([
  { value: '1', label: 'One' },
  { value: '2', label: 'Two' }
], 'value', 'label', true);

Хотя setChoices не управляет языком напрямую, он часто используется вместе с локализованными текстами состояния загрузки и пустого списка.

Особенности форматирования строк

Choices.js допускает использование HTML внутри строк локализации:

addItemText: (value) => {
  return `Добавить <strong>${value}</strong>`;
}

Это позволяет визуально выделять динамические значения, однако требует аккуратности, чтобы не нарушить безопасность отображения данных.

Контекстные различия отображения текста

Один и тот же ключ может использоваться в разных состояниях интерфейса:

  • фильтрация списка
  • пустой результат поиска
  • режим множественного выбора
  • асинхронная загрузка данных

Например, noResults активируется только при поисковом вводе, тогда как noChoices — при отсутствии данных в источнике.

Работа с плейсхолдерами через локализацию

Хотя плейсхолдеры input-элемента задаются отдельно, они часто синхронизируются с языковой конфигурацией:

element.setAttribute('placeholder', 'Выберите значение...');

В многоязычных приложениях этот текст обычно хранится в той же структуре, что и i18n, чтобы сохранять единый слой локализации.

Расширение языковой модели

При необходимости добавления новых текстовых состояний применяется паттерн расширения объекта:

const extendedI18n = {
  ...translations.ru,
  customError: 'Ошибка загрузки данных',
  emptySearch: 'Введите запрос для поиска'
};

Такие поля могут использоваться в обёртках над Choices.js или при кастомизации шаблонов.

Поведение при отсутствии локализации

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

Это позволяет задавать только необходимые изменения без полного копирования конфигурации.

Поддержка Unicode и многоязычных наборов символов

Choices.js корректно работает с UTF-8 строками, включая кириллицу, иероглифы и комбинированные символы. Ограничения возникают только на уровне шрифтов и CSS-оформления, а не самой библиотеки.

noResults: '结果未找到'

Согласованность текстов в интерфейсе

При проектировании языковой конфигурации важно учитывать единообразие формулировок:

  • одинаковые глагольные формы для действий
  • единый стиль подсказок
  • отсутствие конфликтующих терминов для выбора и удаления

Choices.js не накладывает ограничений на стиль текста, поэтому консистентность полностью определяется конфигурацией i18n.

Оглавление