Переопределение стандартных текстов

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

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

Конфигурация переопределения текстов передается при создании экземпляра:

const example = new Choices('#example', {
  i18n: {
    loadingText: 'Загрузка...',
    noResultsText: 'Совпадений не найдено',
    noChoicesText: 'Нет доступных вариантов',
    itemSelectText: 'Нажмите для выбора',
    addItemText: (value) => `Добавить "${value}"`,
    maxItemText: (maxItemCount) => `Можно выбрать не более ${maxItemCount} элементов`
  }
});

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

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

Одним из ключевых элементов интерфейса является отображение состояния загрузки данных. Это особенно актуально при использовании асинхронной подгрузки через ajax.

i18n: {
  loadingText: 'Идет загрузка данных...',
  noResultsText: 'Результаты отсутствуют',
  searchingText: 'Выполняется поиск...'
}

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

Сообщения при отсутствии данных

Отдельная группа текстов отвечает за состояние пустых списков. Эти сообщения критичны для UX, так как определяют поведение интерфейса при отсутствии доступных элементов.

i18n: {
  noChoicesText: 'Список пуст',
  noResultsText: 'Ничего не найдено по запросу'
}

noChoicesText используется, когда исходный список полностью пуст. noResultsText применяется при фильтрации, когда исходные данные существуют, но не соответствуют введенному запросу.

Разделение этих состояний позволяет точнее передавать смысл происходящего в интерфейсе.

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

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

i18n: {
  itemSelectText: 'Выбор осуществляется нажатием',
  itemChooseText: 'Выберите элемент'
}

itemSelectText отображается при наведении на элементы списка. itemChooseText используется в контексте выбора одиночного значения.

Эти строки особенно важны в режимах с множественным выбором, где интерфейс может вести себя неочевидно без поясняющих сообщений.

Динамические тексты с параметрами

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

i18n: {
  addItemText: (value) => `Добавить значение: ${value}`,
  maxItemText: (maxItemCount) => `Достигнут лимит: ${maxItemCount}`,
  removeItemText: (value) => `Удалить элемент ${value}`
}

Функциональный подход позволяет учитывать контекст:

  • текущее введенное значение
  • лимиты выбора
  • состояние элемента списка

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

Сообщения при добавлении элементов

При работе в режиме тегов или пользовательского ввода текстовые сообщения становятся частью интерактивного процесса создания элементов.

i18n: {
  addItemText: (value) => `Добавить "${value}"`,
  maxItemText: (maxItemCount) => `Максимальное количество: ${maxItemCount}`,
  uniqueItemText: 'Значение уже существует'
}

uniqueItemText используется при попытке добавить дублирующее значение. maxItemText ограничивает количество элементов при включенном лимите maxItemCount.

Эти тексты формируют обратную связь при взаимодействии с вводом пользователя.

Локализация и единообразие интерфейса

При интеграции Choices.js в многоязычные интерфейсы i18n становится центральным механизмом адаптации. Все текстовые сообщения могут быть централизованно вынесены в конфигурационные файлы локализации:

const ruLocale = {
  loadingText: 'Загрузка...',
  noResultsText: 'Нет результатов',
  noChoicesText: 'Нет вариантов',
  itemSelectText: 'Выбор элемента',
  addItemText: (value) => `Добавить ${value}`,
  maxItemText: (max) => `Лимит: ${max}`
};

new Choices('#example', {
  i18n: ruLocale
});

Такой подход обеспечивает разделение логики и текстового слоя интерфейса, упрощая поддержку и масштабирование.

Поведение при частичном переопределении

Choices.js допускает частичную замену текстов. При отсутствии ключа в i18n используется значение по умолчанию.

i18n: {
  noResultsText: 'Пусто'
}

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

Особенности использования функций вместо строк

Функции в i18n вызываются в момент рендеринга интерфейса. Это накладывает определенные требования:

  • отсутствие побочных эффектов
  • быстрое выполнение
  • детерминированный результат

Пример корректного использования:

i18n: {
  maxItemText: (count) => `Допустимо: ${count}`
}

Пример нежелательного подхода:

i18n: {
  maxItemText: (count) => {
    console.log(count);
    return `Limit: ${count}`;
  }
}

Логирование и изменение внешнего состояния внутри таких функций приводит к непредсказуемому поведению при частых перерендерингах компонента.

Совместимость с режимом поиска

При использовании поиска (локального или удаленного) задействуются дополнительные текстовые состояния:

i18n: {
  searchingText: 'Поиск...',
  noResultsText: 'Совпадений не найдено'
}

searchingText отображается во время выполнения фильтрации. noResultsText отображается после завершения поиска при отсутствии результатов.

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

Приоритет текстов в интерфейсе

Внутренне Choices.js использует следующую логику при отображении сообщений:

  1. Состояние загрузки (loadingText)
  2. Состояние поиска (searchingText)
  3. Отсутствие элементов (noChoicesText)
  4. Отсутствие результатов (noResultsText)
  5. Ограничения выбора (maxItemText, uniqueItemText)
  6. Подсказки взаимодействия (itemSelectText, itemChooseText)

Каждое состояние перекрывает предыдущее при совпадении условий отображения.

Централизация текстов в архитектуре приложения

В крупных приложениях тексты Choices.js обычно выносятся в отдельный модуль локализации:

export const choicesI18n = {
  loadingText: 'Загрузка данных...',
  noResultsText: 'Ничего не найдено',
  noChoicesText: 'Пустой список',
  itemSelectText: 'Выбрать',
  addItemText: (value) => `Добавить: ${value}`,
  maxItemText: (max) => `Максимум ${max}`
};

Далее модуль подключается в месте инициализации компонента. Такой подход упрощает поддержку и позволяет синхронизировать тексты между разными частями системы, использующими одинаковую терминологию.

Оглавление