Параметры сортировки

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

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

Тип: boolean По умолчанию: true

При включённом значении true элементы сортируются автоматически при инициализации и при обновлении набора данных. Сортировка применяется к массиву choices, а также может затрагивать отображение результатов поиска.

Пример базовой конфигурации:

const example = new Choices('#example', {
  shouldSort: true
});

При shouldSort: false порядок элементов полностью определяется исходной структурой массива или DOM-элементами <option> / <select>, без дополнительной перестановки.

const example = new Choices('#example', {
  shouldSort: false
});

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

sortFn

Параметр sortFn задаёт пользовательскую функцию сортировки, позволяющую полностью переопределить логику сравнения элементов.

Тип: function

Сигнатура функции:

(a, b) => number

или расширенный вариант, который используется внутри Choices.js:

(a, b, { value, label }) => number

Функция должна возвращать:

  • отрицательное число, если a должен идти раньше b
  • положительное число, если a должен идти позже b
  • 0, если порядок равнозначен

Пример сортировки по алфавиту по полю label:

const example = new Choices('#example', {
  shouldSort: true,
  sortFn: (a, b) => {
    return a.label.localeCompare(b.label);
  }
});

Сортировка по длине строки:

const example = new Choices('#example', {
  sortFn: (a, b) => {
    return a.label.length - b.label.length;
  }
});

При использовании sortFn стандартная сортировка полностью заменяется, включая поведение при поиске, если явно не переопределена дополнительная логика.

Взаимодействие shouldSort и sortFn

Комбинация параметров определяет итоговое поведение:

  • shouldSort: false и sortFn задан — функция не применяется, сортировка отключена
  • shouldSort: true и sortFn задан — применяется пользовательская логика
  • shouldSort: true и sortFn не задан — используется встроенная сортировка Choices.js

Это позволяет управлять как фактом сортировки, так и её алгоритмом.

Сортировка и результаты поиска

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

При включённом shouldSort порядок может изменяться после фильтрации, что влияет на отображение совпадений в выпадающем списке.

Типичный сценарий:

  1. Пользователь вводит запрос
  2. Выполняется фильтрация по совпадениям
  3. Применяется сортировка (если включена)
  4. Отображается финальный список

Для случаев, когда важно сохранить релевантность поисковой выдачи, часто отключают сортировку:

const example = new Choices('#example', {
  shouldSort: false
});

Сортировка объектов и сложных структур

Choices.js работает не только с простыми строками, но и с объектами вида:

{
  value: 'us',
  label: 'United States',
  selected: false,
  disabled: false
}

При использовании sortFn доступ к полям объекта позволяет строить более сложные правила:

Сортировка по приоритету и алфавиту

const example = new Choices('#example', {
  sortFn: (a, b) => {
    if (a.selected && !b.selected) return -1;
    if (!a.selected && b.selected) return 1;

    return a.label.localeCompare(b.label);
  }
});

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

Стабильность сортировки

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

const example = new Choices('#example', {
  sortFn: (a, b) => {
    const primary = a.label.localeCompare(b.label);

    if (primary !== 0) return primary;

    return a.value.localeCompare(b.value);
  }
});

Добавление вторичного ключа предотвращает «скачущий» порядок элементов при повторных рендерах.

Сортировка и группы

При использовании групп (optgroup) порядок может определяться как внутри группы, так и между группами. Choices.js применяет сортировку к элементам внутри каждой группы отдельно.

Пример поведения:

  • группы остаются на своих позициях
  • элементы внутри группы сортируются согласно sortFn или встроенной логике

Пример конфигурации:

const example = new Choices('#example', {
  shouldSort: true,
  sortFn: (a, b) => a.label.localeCompare(b.label)
});

В этом случае каждая группа сохраняет структуру, но содержимое упорядочивается по алфавиту.

Практика управления сортировкой

Сортировка в Choices.js используется не только для эстетического упорядочивания, но и для управления логикой интерфейса:

  • отключение сортировки при строгом порядке данных из API
  • кастомная приоритизация выбранных элементов
  • группировка по бизнес-логике через sortFn
  • стабилизация результатов при динамическом обновлении списка

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

Оглавление