Свойство selected

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

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

Роль selected в механизме навигации

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

Основные сценарии изменения значения:

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

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

Начальное состояние и сброс

При создании экземпляра Awesomplete значение selected инициализируется как -1, что означает отсутствие активного элемента.

Сброс происходит в следующих случаях:

  • изменение значения input-поля;
  • закрытие списка предложений;
  • обновление массива данных;
  • вызов методов, которые переинициализируют состояние списка.

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

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

Метод goto напрямую управляет значением selected, изменяя индекс активного элемента.

Логика работы:

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

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

awesomplete.goto(0);  // первый элемент
awesomplete.goto(3);  // четвёртый элемент

После каждого вызова selected обновляется синхронно с UI.

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

Навигационные методы изменяют selected относительно текущего значения.

  • next увеличивает индекс на единицу;
  • previous уменьшает индекс на единицу;
  • при достижении границ списка может применяться циклическое поведение (в зависимости от конфигурации).

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

selected = -1 → 0 → 1 → 2 → ...

или в обратную сторону:

... → 2 → 1 → 0 → -1

При этом -1 обозначает состояние, при котором ни один элемент не активен.

Отображение активного элемента

Изменение selected приводит к обновлению DOM-структуры списка. Awesomplete использует внутренний список li-элементов, соответствующих предложенным значениям.

Механизм обновления включает:

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

Таким образом, selected является связующим звеном между логикой и отображением.

Использование в методе select

При выборе элемента (например, нажатием Enter) значение selected используется как индекс источника данных.

Алгоритм:

  1. проверяется текущее значение selected;
  2. извлекается элемент из массива списка;
  3. значение записывается в input;
  4. список закрывается;
  5. selected сбрасывается в -1.

Если selected остаётся -1, выбор не происходит, что предотвращает некорректное заполнение поля.

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

При открытии выпадающего списка значение selected может быть установлено автоматически:

  • либо в 0, если включена автоподсветка первого элемента;
  • либо в -1, если активация происходит только по навигации.

Это поведение зависит от конфигурации и логики инициализации списка.

Влияние на пользовательский ввод

Свойство selected тесно связано с обработкой клавиатурных событий. При вводе текста и появлении списка:

  • стрелки изменяют selected;
  • Enter подтверждает выбор по selected;
  • Escape сбрасывает значение.

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

Программное управление значением

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

Корректный подход включает использование:

  • goto(index) для установки позиции;
  • next() и previous() для относительной навигации;
  • evaluate() для пересчёта списка и сброса состояния.

Граничные случаи

При работе со свойством selected учитываются следующие особенности:

  • пустой список всегда приводит к selected = -1;
  • фильтрация данных может обнулять индекс;
  • быстрый ввод текста вызывает частые сбросы;
  • асинхронное обновление списка может временно приводить к рассинхронизации индекса и DOM, которая устраняется повторной инициализацией.

Роль в архитектуре компонента

selected выступает как центральный индекс состояния внутри логики Awesomplete. Он связывает:

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

Без этого свойства невозможно корректное управление текущим активным элементом, так как именно оно определяет, какой элемент считается «фокусным» в данный момент времени.

Оглавление