В объекте options помимо параметров виджета можно передать коллбэки (функции-обработчики для событий, происходящих в работе виджета). Все коллбэки опциональные, this привязано к input-элементу.

onSearchStart

Вызывается перед отправкой запроса к серверу подсказок. Здесь можно модифицировать параметры (модифицировать аргумент params) или вернуть false чтобы предотвратить запрос.

(params: Record<string, unknown>) => void | false;

onSearchError

Вызывается, если сервер вернул ошибку.

(
    query: string | null,
    res: Response | undefined,
    textStatus: string,
    errorThrown: string
) => void;

onSuggestionsFetch

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

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

(suggestions: Suggestion[]) => Suggestion[] | void;

onSearchComplete

Вызывается при получении ответа от сервера и содержит финальный список подсказок (вызывается после onSuggestionsFetch). В suggestions передается массив полученных подсказок.

(query: string, suggestions: Suggestion[]) => void;

onSelect

Вызывается при выборе подсказки (как при выборе пользователя, так и при автоматическом).

Аргумент changed показывает, было ли реально выбрано новое значение (true), или только обогащено текущее (false), т.е. когда suggestion.value осталось прежним, а только обновились поля в suggestion.data

(suggestion: Suggestion, changed: boolean) => void;

onSelectNothing

Вызывается, пользователь нажал ENTER или input-элемент потерял фокус, а подходящей подсказки нет.

(query: string) => void;

onInvalidateSelection

Вызывается при сбросе выбранной раньше подсказки после изменения значения в текстовом поле.

(suggestion: Suggestion) => void;

beforeRender

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

(container: HTMLElement) => void;

beforeFormat

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

(suggestion: Suggestion, query: string) => Suggestion;

formatResult

Форматирование подсказки перед ее отображением в списке. Возвращает строку (обычный текст или html-разметка), которая будет выведена в списке подсказок как есть.

(
    value: string,
    currentValue: string,
    suggestion: Suggestion,
    options: { unformattableTokens: string[] }
) => string;

formatSelected

Возвращает строку для вставки в поле ввода при выборе подсказки. Заменяет suggestion.value на переданное значение.

Если возвращает null - будет использовано стандартное значение подсказки.

(suggestion: Suggestion) => string | null;
  • Нет меток