Параметр data

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

В стандартном режиме Awesomplete предполагает, что каждый элемент списка — это строка. В этом случае механизм сопоставления прост: ввод пользователя сравнивается непосредственно со значением элемента. Однако при переходе к объектным данным поведение становится неоднозначным, и именно параметр data задаёт правило извлечения сравниваемого значения.

Внутри Awesomplete процесс формирования подсказок проходит несколько стадий:

  • получение списка элементов
  • извлечение значения для сравнения
  • фильтрация по введённому тексту
  • сортировка результатов
  • отображение результата

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

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

Форматы задания data

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

Функция извлечения значения

Наиболее гибкий вариант — передача функции:

data: function(item, input) {
    return item.value;
}

Здесь:

  • item — текущий элемент списка
  • input — текущее значение поля ввода

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

Использование объектов

При работе с объектами data позволяет указать, какое поле участвует в поиске:

new Awesomplete(input, {
    list: [
        { label: "JavaScript", value: "js" },
        { label: "TypeScript", value: "ts" }
    ],
    data: function(item) {
        return item.label;
    }
});

В этом случае пользователь видит один набор данных, но поиск происходит по полю label.

Строковый доступ к свойству

Во многих случаях допускается упрощённая форма — строка с именем свойства:

data: "label"

Такой вариант эквивалентен функции:

data: function(item) {
    return item["label"];
}

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

Влияние data на фильтрацию

Awesomplete использует значение, возвращаемое data, не только для сравнения, но и для определения релевантности элемента. Это означает, что:

  • совпадения ищутся именно в возвращаемом значении
  • сортировка также опирается на это значение
  • поведение фильтра зависит от структуры, заданной data

Если data возвращает неожиданный результат (например, числовое поле или null), поведение автодополнения может стать непредсказуемым.

Использование с вложенными структурами

Часто данные приходят в виде вложенных объектов:

{
    name: "React",
    meta: {
        category: "library"
    }
}

В этом случае data может извлекать вложенные значения:

data: function(item) {
    return item.meta.category;
}

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

Совмещение data с другими параметрами Awesomplete

Параметр data тесно взаимодействует с другими настройками:

  • filter — использует значение, возвращённое data, для определения совпадений
  • sort — может учитывать это же значение при ранжировании
  • item — отвечает за визуальное отображение, но не влияет на поиск напрямую
  • replace — использует выбранный элемент, а не результат data

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

Примеры комплексного использования

Список объектов с отображением и поиском по разным полям

new Awesomplete(input, {
    list: [
        { name: "JavaScript", id: 1 },
        { name: "TypeScript", id: 2 }
    ],
    data: function(item) {
        return item.name;
    },
    item: function(text, item) {
        return Awesomplete.ITEM(text, item.name);
    }
});

Здесь:

  • data отвечает за поиск
  • item отвечает за отображение

Поиск по коду, отображение по названию

data: function(item) {
    return item.code;
}

При этом пользователь видит:

item.name

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

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

Неправильная конфигурация data часто приводит к некорректной работе автодополнения.

Возврат объекта вместо строки

data: function(item) {
    return item;
}

В этом случае сравнение может превратиться в [object Object], что делает поиск бесполезным.

Несоответствие структуры данных

Если часть элементов массива — строки, а часть — объекты, data может вести себя нестабильно:

list: ["JavaScript", { name: "TypeScript" }]

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

Отсутствие проверки полей

data: function(item) {
    return item.name.toLowerCase();
}

Если item не содержит name, возникнет ошибка выполнения. Более устойчивый вариант:

data: function(item) {
    return (item.name || "").toLowerCase();
}

Производительность при большом списке

При больших объёмах данных (тысячи элементов) функция data вызывается многократно в процессе фильтрации. Поэтому:

  • желательно избегать тяжёлых вычислений внутри data
  • не выполнять HTTP-запросы или сложные преобразования
  • по возможности предварительно нормализовать данные

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

Связь data и кастомных источников данных

При динамической загрузке данных (например, из API) data помогает унифицировать формат:

fetch("/api/languages")
    .then(r => r.json())
    .then(dataList => {
        new Awesomplete(input, {
            list: dataList,
            data: item => item.title
        });
    });

Таким образом, независимо от структуры ответа API, Awesomplete работает с предсказуемым ключом.

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

Параметр data можно рассматривать как слой абстракции между:

  • сырыми данными
  • логикой поиска
  • интерфейсом пользователя

Он позволяет разделить:

  • структуру хранения данных
  • правила поиска
  • визуальное отображение

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

Оглавление