Параметр sort

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

По умолчанию механизм сортировки в Awesomplete ориентирован на повышение релевантности: элементы, более точно соответствующие введённой строке, поднимаются выше в списке. Это достигается через встроенный алгоритм сравнения, который учитывает близость совпадения, позицию совпадения внутри строки и другие эвристики.

Сигнатура и базовая структура параметра

sort представляет собой функцию-компаратор, аналогичную используемой в стандартных алгоритмах сортировки Jav * aScript:

sort: function(a, b) {
    return a.label.localeCompare(b.label);
}

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

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

Элементы a и b могут быть как строками, так и объектами с полями label и value, в зависимости от структуры источника данных.

Структура элементов списка

Внутреннее представление элементов в Awesomplete может быть приведено к двум основным формам:

Строковой формат

["Apple", "Apricot", "Banana"]

Объектный формат

[
  { label: "Apple", value: "apple" },
  { label: "Apricot", value: "apricot" }
]

В контексте сортировки обычно используется поле label, поскольку именно оно участвует в отображении пользователю.

Отключение сортировки

Сортировка может быть полностью отключена, что приводит к сохранению исходного порядка элементов:

sort: false

В этом режиме:

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

Такой режим полезен при работе с уже заранее отсортированными данными, например, полученными с сервера.

Пользовательская логика сортировки

Основное применение параметра sort связано с переопределением стандартного поведения. Возможны различные стратегии.

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

sort: function(a, b) {
    return a.label.localeCompare(b.label);
}

Используется при необходимости строгого лексикографического порядка без учёта релевантности ввода.

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

sort: function(a, b) {
    const aStarts = a.label.startsWith(this.input.value);
    const bStarts = b.label.startsWith(this.input.value);

    if (aStarts && !bStarts) return -1;
    if (!aStarts && bStarts) return 1;

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

Данный подход формирует двухуровневую систему приоритизации:

  1. совпадения с начала строки
  2. алфавитная сортировка

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

sort: function(a, b) {
    return a.label.length - b.label.length;
}

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

Смешанная релевантность

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

sort: function(a, b) {
    const input = this.input.value.toLowerCase();

    const aIndex = a.label.toLowerCase().indexOf(input);
    const bIndex = b.label.toLowerCase().indexOf(input);

    if (aIndex !== bIndex) {
        return aIndex - bIndex;
    }

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

Логика основана на позиционном совпадении подстроки внутри строки.

Контекст выполнения sort

Функция sort вызывается после этапа фильтрации. Это означает, что в неё уже поступает сокращённый список элементов, соответствующих введённому запросу.

Последовательность обработки данных внутри Awesomplete:

  1. Получение исходного массива данных
  2. Фильтрация по введённому тексту
  3. Применение sort (если определён)
  4. Ограничение количества элементов (maxItems)
  5. Отображение результата

Влияние на UX и поведение интерфейса

Изменение параметра sort напрямую влияет на восприятие качества автодополнения:

  • агрессивная сортировка повышает ощущение “умного” поиска
  • отключение сортировки делает поведение предсказуемым
  • кастомные алгоритмы позволяют адаптировать список под доменную логику

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

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

Работа с производительностью

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

Рекомендации по вычислительной нагрузке:

  • избегать тяжёлых вычислений внутри sort
  • не выполнять сетевые запросы
  • минимизировать вызовы toLowerCase() и localeCompare() в больших списках
  • кэшировать нормализованные значения при возможности

Пример оптимизации через предвычисление:

const prepared = list.map(item => ({
    ...item,
    norm: item.label.toLowerCase()
}));

sort: function(a, b) {
    return a.norm.localeCompare(b.norm);
}

Поведение при различных типах данных

Строки

Наиболее простой случай, сортировка выполняется напрямую через строковые операции.

Объекты

Требуется явное указание поля (label, value или пользовательское свойство).

Смешанные данные

Нежелательный сценарий, приводящий к непредсказуемым результатам; требует нормализации структуры до применения sort.

Взаимодействие с другими параметрами Awesomplete

filter

Фильтрация выполняется до сортировки, поэтому изменение sort не влияет на критерии отбора, только на порядок.

maxItems

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

autoFirst

При включённой опции первый элемент списка зависит напрямую от результата сортировки, так как именно он становится активным по умолчанию.

Типичные ошибки при настройке сортировки

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

Поведение при отключении сортировки и фильтрации одновременно

При комбинации:

sort: false
filter: false

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

Оглавление