Свойство index

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

index представляет собой числовое значение, указывающее на текущий активный элемент списка подсказок:

  • 0 — первый элемент списка
  • 1 — второй элемент
  • n — соответствующий элемент в пределах массива результатов
  • -1 — ни один элемент не выбран

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

Связь index с массивом list

Внутренняя логика Awesomplete строится вокруг массива list, который содержит элементы после фильтрации пользовательского ввода. index всегда синхронизирован с этим массивом:

  • list[0] соответствует index = 0
  • list[1] соответствует index = 1
  • и так далее

При изменении набора подсказок (например, при вводе нового символа) происходит сброс или пересчёт index.

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

Инициализация состояния index

При создании экземпляра Awesomplete:

  • index устанавливается в -1
  • список подсказок скрыт
  • ни один элемент не активен

Такое состояние считается базовым и означает отсутствие текущего выбора.

const awesomplete = new Awesomplete(inputElement);
// awesomplete.index === -1

Изменение index при навигации

Основное изменение index происходит при взаимодействии пользователя с клавиатурой.

Клавиша ↓ (Arrow Down)

При нажатии стрелки вниз:

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

Если достигнут конец списка, поведение зависит от конфигурации, но обычно происходит циклический переход или остановка на последнем элементе.

Клавиша ↑ (Arrow Up)

При нажатии стрелки вверх:

  • index уменьшается на 1
  • выделение перемещается к предыдущему элементу
  • при достижении начала списка возможно возвращение к -1

Поведение при -1

Состояние index = -1 означает:

  • активный элемент отсутствует
  • поле ввода остаётся без автоподстановки
  • список подсказок может быть видим, но без выделения

Связь index и метода goto()

Метод goto(i) напрямую изменяет значение index:

  • goto(0) — переход к первому элементу
  • goto(n) — переход к элементу с индексом n
  • goto(-1) — снятие выделения

При вызове goto() выполняется:

  1. обновление index
  2. перерасчёт выделенного DOM-элемента
  3. синхронизация aria-атрибутов
  4. обновление визуального состояния списка

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

Взаимодействие index с DOM-структурой

Каждое значение index соответствует конкретному элементу <li> внутри контейнера списка (ul):

  • ul.children[index] — текущий активный элемент
  • этому элементу присваивается класс active или аналогичный
  • обновляются атрибуты доступности (aria-selected="true")

При изменении index происходит:

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

Сброс index при изменении ввода

При каждом изменении текста в поле ввода выполняется проверка соответствия текущего списка:

  • если список пересобирается → index = -1
  • если список остаётся стабильным → индекс сохраняется (в зависимости от реализации)
  • если текущий индекс выходит за границы массива → выполняется корректировка

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

index и метод select()

Метод select() использует текущее значение index как источник выбора:

  • если index >= 0 → выбирается элемент list[index]
  • если index = -1 → выбор не выполняется или используется fallback логика

После вызова select():

  • поле ввода заполняется значением выбранного элемента
  • список скрывается
  • index может быть сброшен

Особенности поведения при динамическом списке

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

  • при добавлении элементов список расширяется
  • при фильтрации список сокращается
  • при полной замене данных index сбрасывается

Если этого не учитывать, возможны состояния:

  • index указывает на несуществующий элемент
  • визуальное выделение отсутствует при ненулевом index
  • некорректное поведение goto()

Логика ограничения диапазона index

Awesomplete гарантирует, что index всегда находится в допустимом диапазоне:

  • нижняя граница: -1
  • верхняя граница: list.length - 1

При выходе за пределы:

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

Влияние index на UX-поведение

Хотя index является внутренним свойством, он напрямую определяет пользовательский опыт:

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

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

Оглавление