Метод previous

Метод previous отвечает за перемещение активного выделения (highlight) вверх по списку подсказок в выпадающем меню автодополнения. Он является частью механизма навигации внутри компонента и тесно связан с методами управления списком, такими как next, open, close и внутренним состоянием активного элемента.

В типичном сценарии использования Awesomplete список подсказок отображается под полем ввода, и пользователь может перемещаться по элементам клавишами стрелок. previous реализует программный эквивалент нажатия клавиши ↑ (ArrowUp).

Назначение и поведение метода

Метод previous изменяет индекс текущего выделенного элемента списка, уменьшая его на единицу. Если активный элемент отсутствует, поведение зависит от состояния компонента:

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

Основная задача метода — обеспечить линейную навигацию вверх по результатам автодополнения.

Внутренний механизм работы

Внутри Awesomplete навигация по списку реализована через индекс текущего активного элемента. Условно логика previous может быть представлена следующим образом:

  1. Получение текущего индекса активного элемента.
  2. Уменьшение индекса на 1.
  3. Проверка границ массива элементов.
  4. Обновление состояния выделения.
  5. Обновление UI (подсветка нового элемента, снятие старой подсветки).

При этом метод работает не с DOM напрямую, а через внутренние структуры данных, которые затем синхронизируются с отображением.

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

Список открыт и элемент выделен

При вызове previous активный индекс уменьшается:

  • индекс 3 → 2
  • индекс 2 → 1
  • индекс 1 → 0

При достижении нуля дальнейшее поведение зависит от реализации:

  • либо остаётся на первом элементе,
  • либо переходит в состояние “нет выделения”.

Список открыт, но нет активного элемента

Если ни один элемент не выделен, previous может:

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

Такое поведение обеспечивает предсказуемую навигацию при первом нажатии клавиши вверх.

Список пуст

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

Связь с методом next

previous является зеркальным отражением метода next.

  • next увеличивает индекс активного элемента.
  • previous уменьшает индекс активного элемента.

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

Программный вызов метода

Метод может вызываться напрямую через экземпляр Awesomplete:

const input = document.querySelector("input");

const awesomplete = new Awesomplete(input, {
  list: ["Apple", "Apricot", "Avocado", "Banana", "Blueberry"]
});

Программное перемещение вверх по списку:

awesomplete.previous();

Такой вызов эквивалентен нажатию стрелки вверх при открытом списке подсказок.

Интеграция с клавиатурными событиями

Метод previous обычно вызывается внутри обработчика клавиатуры, привязанного к полю ввода. Логика сопоставления клавиш:

  • ArrowUp → previous()
  • ArrowDown → next()
  • Enter → выбор активного элемента

Пример обработки:

input.addEventListener("keydown", function (event) {
  switch (event.key) {
    case "ArrowUp":
      awesomplete.previous();
      event.preventDefault();
      break;

    case "ArrowDown":
      awesomplete.next();
      event.preventDefault();
      break;
  }
});

preventDefault() используется для предотвращения стандартного поведения курсора в поле ввода.

Особенности обновления интерфейса

При вызове previous происходит пересинхронизация состояния списка и DOM:

  • удаляется CSS-класс активного элемента у текущего элемента;
  • добавляется CSS-класс новому элементу;
  • при необходимости прокручивается контейнер списка, чтобы активный элемент оставался видимым.

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

Работа с циклической навигацией

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

  • при достижении первого элемента previous переносит выделение на последний элемент списка.

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

Влияние фильтрации списка

Awesomplete часто работает с динамически отфильтрованными данными. После каждого ввода:

  • список подсказок пересобирается,
  • активный индекс сбрасывается,
  • метод previous начинает работу с нового состояния.

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

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

Если выпадающий список закрыт, вызов previous обычно:

  • либо игнорируется,
  • либо приводит к открытию списка с установкой последнего элемента как активного.

Поведение зависит от внутренней логики экземпляра и контекста вызова.

Синхронизация с input value

Метод previous не изменяет значение поля ввода напрямую. Он только меняет активный элемент списка.

Изменение input.value происходит только при:

  • выборе элемента (Enter или click),
  • явном вызове методов выбора.

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

Взаимодействие с кастомными шаблонами

При использовании кастомного рендера элементов (item, replace и т.п.) previous продолжает работать на уровне индексов, не завися от визуального представления.

Однако важно учитывать:

  • визуальные элементы могут иметь дополнительную вложенность;
  • подсветка активного элемента должна корректно применяться к корневому DOM-узлу.

Расширение поведения через наследование

При необходимости метод previous может быть переопределён в расширенных версиях компонента:

class ExtendedAwesomplete extends Awesomplete {
  previous() {
    super.previous();
    console.log("Перемещение вверх по списку");
  }
}

Такой подход используется для:

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

Типичные ошибки при использовании

  • вызов previous при закрытом списке без проверки состояния;
  • попытка синхронизировать индекс вручную вне API;
  • конфликт с внешними обработчиками клавиатуры;
  • отсутствие защиты от пустого списка.

Корректная работа предполагает использование метода только в контексте активного экземпляра с валидным списком подсказок.

Производительность и ограничения

Метод previous имеет константную сложность O(1), так как:

  • не выполняет фильтрацию данных,
  • работает только с текущим индексом,
  • обновляет минимальный набор DOM-элементов.

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

Оглавление