Модификация свойств

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

Базовая модель конфигурации

Каждый экземпляр Awesomplete создаётся на основе входного элемента и объекта настроек:

const awesomplete = new Awesomplete(input, {
    list: ["Apple", "Banana", "Orange"],
    minChars: 1,
    maxItems: 10
});

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

awesomplete.minChars = 2;
awesomplete.maxItems = 5;

Такой подход позволяет менять поведение без повторной инициализации компонента.

Свойство list

list определяет источник данных для автодополнения. Оно может принимать:

  • массив строк
  • массив объектов
  • функцию, возвращающую массив

Массив строк

awesomplete.list = ["HTML", "CSS", "JavaScript"];

Массив объектов

awesomplete.list = [
    { label: "JavaScript", value: "js" },
    { label: "TypeScript", value: "ts" }
];

В этом случае:

  • label отображается пользователю
  • value используется как фактическое значение

Функция как источник данных

awesomplete.list = function() {
    return ["React", "Vue", "Svelte"];
};

Функциональный подход применяется при динамической генерации данных, например, при работе с API или локальными фильтрами.

Свойство minChars

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

awesomplete.minChars = 3;

Поведение:

  • 0 — список открывается сразу при фокусе
  • 1+ — поиск начинается после ввода указанного количества символов

Использование больших значений снижает нагрузку при работе с большими списками и API-запросами.

Свойство maxItems

maxItems ограничивает количество элементов, отображаемых в выпадающем списке.

awesomplete.maxItems = 7;

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

Свойство autoFirst

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

awesomplete.autoFirst = true;

При значении:

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

Данное свойство влияет на поведение клавиатурной навигации.

Свойство filter

filter отвечает за логику отбора элементов из списка.

Стандартная реализация выполняет проверку вхождения строки:

awesomplete.filter = function(text, input) {
    return text.toLowerCase().includes(input.toLowerCase());
};

Параметры:

  • text — элемент списка
  • input — введённый текст

Возможные модификации:

Фильтрация по началу строки

awesomplete.filter = function(text, input) {
    return text.toLowerCase().startsWith(input.toLowerCase());
};

Регулярные выражения

awesomplete.filter = function(text, input) {
    return new RegExp("^" + input, "i").test(text);
};

Изменение фильтра позволяет реализовать сложные сценарии поиска, включая морфологию и многокритериальные условия.

Свойство sort

sort управляет порядком отображения результатов.

awesomplete.sort = function(a, b) {
    return a.localeCompare(b);
};

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

awesomplete.sort = function(a, b) {
    return a.length - b.length;
};

Сортировка может учитывать:

  • частоту использования
  • релевантность
  • внешние данные (например, рейтинги)

Свойство item

item определяет HTML-шаблон одного элемента списка.

awesomplete.item = function(text, input) {
    return Awesomplete.$.create("li", {
        innerHTML: text
    });
};

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

Подсветка совпадений

awesomplete.item = function(text, input) {
    const html = text.replace(
        new RegExp(input, "gi"),
        match => `<mark>${match}</mark>`
    );

    return Awesomplete.$.create("li", {
        innerHTML: html
    });
};

Это используется для визуального выделения совпадающих частей строки.

Свойство replace

replace определяет, как выбранный элемент вставляется в input.

awesomplete.replace = function(text) {
    this.input.value = text;
};

Вставка объекта

Если list содержит объекты:

awesomplete.replace = function(item) {
    this.input.value = item.value;
};

Добавление форматирования

awesomplete.replace = function(text) {
    this.input.value = text + " ";
};

Часто применяется для добавления разделителей или тегов.

Свойство data

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

awesomplete.data = function(item) {
    return item.label;
};

Для объектов:

awesomplete.data = function(item) {
    return item.name;
};

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

Свойство container

container задаёт DOM-элемент, в который помещается список автодополнения.

awesomplete.container = document.querySelector(".custom-container");

Используется для:

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

Свойство ul

ul представляет собой DOM-элемент списка (<ul>), используемый Awesomplete.

console.log(awesomplete.ul);

Возможные операции:

  • добавление классов
  • изменение атрибутов
  • прямое управление стилями
awesomplete.ul.classList.add("custom-list");

Свойство input

input — связанный текстовый элемент.

console.log(awesomplete.input.value);

Позволяет:

  • отслеживать текущее значение
  • программно изменять ввод
  • синхронизировать с внешними компонентами

Свойство selected

selected содержит индекс выбранного элемента.

awesomplete.selected = 2;

Используется для:

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

Свойство index

index отражает текущую позицию активного элемента в списке.

awesomplete.index = 0;

Особенности:

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

Динамическое обновление свойств

Модификация свойств в рантайме позволяет изменять поведение без пересоздания экземпляра.

awesomplete.maxItems = 3;
awesomplete.minChars = 2;
awesomplete.list = ["Go", "Rust", "Python"];

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

Взаимное влияние свойств

Некоторые свойства тесно связаны между собой:

  • list и filter определяют результат поиска
  • data влияет на filter и item
  • index, selected и autoFirst формируют навигацию
  • replace зависит от структуры данных list

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

Оглавление