Метод goto

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

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

Основная задача goto — изменить текущую позицию курсора выбора в списке результатов автодополнения. В отличие от методов, которые просто открывают или закрывают список, goto напрямую влияет на внутреннее состояние навигации.

Ключевая особенность:

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

Сигнатура и форма вызова

Внутренняя форма метода в контексте Awesomplete выглядит следующим образом:

awesomplete.goto(index, up)

Где:

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

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

awesomplete.goto(i)

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

Поведение метода

При вызове goto выполняется несколько внутренних шагов:

  1. Проверка наличия списка подсказок.

    • Если список пуст, метод завершает выполнение без изменений.

  2. Нормализация индекса.

    • Значение приводится к допустимому диапазону [0, items.length - 1].
    • При выходе за границы происходит либо зацикливание, либо фиксация на крайних значениях (в зависимости от конфигурации и версии).

  3. Обновление внутреннего состояния.

    • Сохраняется текущий активный индекс.
    • Снимается выделение с предыдущего элемента.

  4. Обновление DOM.

    • Удаляются CSS-классы активного элемента.
    • Новый элемент получает класс активного состояния (обычно aria-selected или аналогичный внутренний класс Awesomplete).

  5. Синхронизация доступности (ARIA).

    • Обновляются атрибуты для поддержки screen readers.

Взаимодействие с внутренним состоянием

Awesomplete хранит состояние текущего выбора в переменной, условно обозначаемой как selectedIndex. Метод goto напрямую изменяет это значение.

Поведение можно описать псевдологикой:

this.selectedIndex = i;
this.evaluate();

где:

  • selectedIndex — индекс текущего выделенного элемента;
  • evaluate() — перерисовка списка и обновление состояния UI.

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

Отличие от next и previous

Метод goto является базовым строительным блоком для навигации, тогда как next и previous — это обёртки над ним.

  • next() обычно вызывает goto(selectedIndex + 1)
  • previous() вызывает goto(selectedIndex - 1)

Таким образом:

  • goto — абсолютное позиционирование;
  • next/previous — относительное перемещение.

Обработка границ списка

Особое внимание уделяется поведению при достижении границ:

Верхняя граница

Если индекс становится меньше 0:

  • либо происходит переход в конец списка;
  • либо фиксируется значение 0 (в зависимости от конфигурации).

Нижняя граница

Если индекс превышает длину массива:

  • либо возвращается к 0;
  • либо фиксируется на последнем элементе.

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

Сценарии использования

Метод goto применяется в следующих ситуациях:

1. Программная установка выделения

awesomplete.goto(3);

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

2. Синхронизация с внешними событиями

При кастомной фильтрации списка:

awesomplete.list = filtered;
awesomplete.goto(0);

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

3. Интеграция с клавиатурной логикой

При обработке клавиш стрелок:

if (key === "ArrowDown") {
    awesomplete.goto(awesomplete.selectedIndex + 1);
}

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

Каждый вызов goto обычно сопровождается вызовом evaluate, который отвечает за:

  • перерисовку списка;
  • применение фильтров;
  • обновление DOM-структуры.

Таким образом, goto не является изолированной операцией — он встроен в цикл обновления интерфейса.

Особенности реализации

Внутренняя реализация метода оптимизирована под минимальное количество DOM-операций. В типичном случае:

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

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

Ограничения

Метод имеет несколько функциональных ограничений:

  • не выполняет выбор значения;
  • не инициирует событие select;
  • не изменяет текст input-поля;
  • работает только при наличии открытого списка.

Поведение при пустом списке

Если список подсказок пуст:

  • метод завершает выполнение без ошибок;
  • состояние selectedIndex обычно устанавливается в -1;
  • DOM остаётся без активных элементов.

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

Awesomplete активно использует ARIA-атрибуты, и goto обновляет:

  • aria-selected="true" для активного элемента;
  • aria-activedescendant у поля ввода.

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

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

Передача некорректного индекса

awesomplete.goto("abc");

Результат:

  • приведение к числу;
  • возможное попадание в NaN и сброс поведения.

Выход за пределы массива без проверки

awesomplete.goto(9999);

Результат:

  • нормализация к последнему элементу или циклический переход.

Вызов без открытого списка

Метод может отработать, но визуального эффекта не будет.

Роль в архитектуре Awesomplete

goto является центральным элементом навигационного слоя библиотеки. Он связывает:

  • пользовательский ввод;
  • клавиатурные события;
  • обновление списка;
  • визуальное состояние UI.

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

Оглавление