Встроенная функция фильтрации

Встроенная функция фильтрации в Awesomplete определяет, какие элементы из исходного списка будут показаны пользователю при вводе текста. Именно этот механизм отвечает за «интеллект» автодополнения: сравнение введённой строки с доступными вариантами, отбор совпадений и формирование списка подсказок.

Фильтрация в Awesomplete выполняется на каждом изменении значения input-поля. После каждого ввода символа библиотека:

  1. Берёт текущую строку из поля ввода.
  2. Нормализует её (обычно приводит к нижнему регистру).
  3. Прогоняет каждый элемент списка через функцию фильтрации.
  4. Оставляет только те элементы, которые удовлетворяют условию совпадения.

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

Поведение фильтра по умолчанию

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

Основные характеристики поведения:

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

Пример логики:

  • список: ["Apple", "Banana", "Apricot", "Blueberry"]
  • ввод: "ap"
  • результат: "Apple", "Apricot"

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

Сигнатура функции фильтрации

Awesomplete позволяет полностью переопределить механизм фильтрации через параметр filter. Это функция высшего порядка, которая принимает два аргумента:

  • text — текущий элемент списка;
  • input — строка, введённая пользователем.

Функция должна вернуть:

  • true, если элемент подходит;
  • false, если элемент должен быть исключён.

Общий вид:

filter: function(text, input) {
    return условие_совпадения;
}

Такой подход даёт полный контроль над логикой сопоставления.

Внутренняя нормализация данных

Перед сравнением Awesomplete приводит данные к унифицированному виду. Обычно это включает:

  • преобразование строки в нижний регистр;
  • приведение значения элемента к строке (если это объект);
  • удаление лишних служебных символов в некоторых режимах отображения.

Важно учитывать, что сама библиотека не выполняет агрессивную очистку текста. Например, диакритические знаки (é, ü, ñ) не всегда нормализуются, что может влиять на результаты фильтрации.

Работа с разными типами данных

Список Awesomplete может содержать не только строки, но и объекты:

[
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" }
]

В этом случае фильтрация обычно применяется к отображаемому полю (label), а не к значению (value). Это важно, поскольку пользователь взаимодействует именно с текстовой частью.

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

Переопределение фильтра: расширение логики

Стандартный фильтр по началу строки не всегда подходит для реальных задач. Часто требуется более гибкое поведение:

  • поиск по вхождению подстроки;
  • поиск по нескольким словам;
  • нечёткое совпадение;
  • игнорирование символов-разделителей.

Пример фильтрации по вхождению:

filter: function(text, input) {
    return text.toLowerCase().indexOf(input.toLowerCase()) !== -1;
}

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

Контекстная фильтрация и многословный ввод

При вводе составных строк фильтрация становится более сложной задачей. Например, пользователь вводит:

"new yo"

Ожидается совпадение с:

  • “New York”
  • “New York City”

В таких случаях фильтр может быть расширен до разбиения строки на токены:

filter: function(text, input) {
    const words = input.toLowerCase().split(" ");
    const target = text.toLowerCase();

    return words.every(word => target.includes(word));
}

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

Производительность фильтрации

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

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

Оптимизация обычно сводится к:

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

При больших списках (1000+ элементов) даже небольшие избыточные операции могут заметно влиять на отзывчивость интерфейса.

Чувствительность к регистру и локализация

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

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

Для корректной локализации фильтра часто используют localeCompare или нормализацию Unicode:

filter: function(text, input) {
    return text.toLowerCase().normalize()
        .includes(input.toLowerCase().normalize());
}

Взаимодействие фильтра с сортировкой

Фильтрация и сортировка в Awesomplete работают как последовательные этапы:

  1. Сначала применяется фильтр.
  2. Затем отфильтрованные элементы сортируются.

Это означает, что фильтр определяет кандидатов, а сортировка — их порядок. При изменении фильтра поведение списка может радикально меняться, даже если сортировка остаётся неизменной.

Кастомные сценарии фильтрации

Фильтрация может использоваться не только для поиска, но и для:

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

Пример фильтрации по дополнительному полю:

filter: function(item, input) {
    return item.category === currentCategory &&
           item.label.toLowerCase().includes(input.toLowerCase());
}

Это превращает Awesomplete в инструмент контекстного выбора данных.

Особенности поведения при пустом вводе

При пустой строке ввода фильтрация обычно пропускает все элементы либо не отображает список вовсе — в зависимости от настроек minChars. Однако сама функция фильтра всё равно может вызываться, что важно учитывать при оптимизации.

Типичная проверка:

filter: function(text, input) {
    if (!input) return false;
    return text.toLowerCase().startsWith(input.toLowerCase());
}

Это позволяет полностью контролировать момент появления подсказок.

Ограничения встроенной фильтрации

Несмотря на гибкость, встроенная модель имеет ряд ограничений:

  • отсутствует полноценный fuzzy-search;
  • нет встроенного ранжирования совпадений;
  • ограниченные средства лингвистической нормализации;
  • нет автоматического учета морфологии языка.

Поэтому в сложных сценариях фильтр часто заменяется или дополняется внешними алгоритмами поиска.

Практическое значение фильтрационного механизма

Фильтрация является центральным элементом работы Awesomplete, поскольку:

  • определяет релевантность подсказок;
  • влияет на UX скорости поиска;
  • задаёт поведение интерфейса без изменения DOM;
  • позволяет адаптировать компонент под любые типы данных.

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

Оглавление