Автозаполнение

Общая информация

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

Разметка

<input type="text" class="input" id="autocomplete2"
           data-autocomplete
           data-autocomplete-list="Qexy,Lorem Ipsum,Lorem,Ipsum,Hello,world,welcome,Lorem ipsum dolor sit amet consectetur adipisicing elit">

Пример работы кода выше

Атрибуты

Атрибут data-autocomplete является триггером для обработки компонента автозаполнения и срабатывает при получении фокуса на поле ввода.

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

data-autocomplete-list

Список всех доступных результатов запросов через символ ";". Поиск подходящих будет вычисляться с помощью javascript.

data-autocomplete-url

Задаёт URL адрес, откуда будут загружаться подходящие под запрос предложения. Данные от обработчика необходимо возвращать в виде JSON и передать в нем список значений в параметре list.

Пример возвращаемых данных

{
    "list": ["value 1", "value 2", "value N"]
}

data-autocomplete-method

Метод отправки запроса на получение данных. По умолчанию используется GET запрос.

data-autocomplete-key

Имя ключа, отправляемого в запросе на сервер. По умолчанию "value".

Например, если мы хотим отправить значение "myvalue" из поля ввода методом GET, то запрос будет таким GET['value'] = "myvalue".

data-autocomplete-min

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

data-autocomplete-max-items

Максимальное кол-во выводимых результатов

Javascript

Для прямой работы через javascript, необходимо создать экземпляр класса PipUI.Autocomplete.

Инициализация

Конструктор данного класса поддерживает 2 параметра: HTMLElement и Object

Первый параметр - объект или селектор формы ввода.

Второй параметр - объект опций

<input type="text" class="input" id="autocomplete">

<script>
    let autocomplete = new PipUI.Autocomplete("#autocomplete");
</script>

Опции

// Выводить в консоль отладку
debug: false

// Настройки источника списка. Если не указан URL, то данные будут браться из list
source: {
	// URL адрес источника, к которому будет производиться запрос на получение списка
	url: ''
	
	// Метод отправки запроса
	method: 'GET'
	
	// Ключ отправляемого параметра значения
	key: 'value'
	
	// Дополнительные параметры, отправляемые с запросом
	extra: undefined
}

// Основной список значений
list: []

// Минимальное кол-во введенных символов в форму, после которых будет обрабатываться список
min: 2

// Максимальное кол-во выводимых результатов
maxItems: 10

// Функция обратного вызова, срабатываемая при обновлении списка
updateCallback: undefined

// Функция обратного вызова, срабатываемая при переключении на следующий пункт списка
nextCallback: undefined

// Функция обратного вызова, срабатываемая при переключении на предыдущий пункт списка
prevCallback: undefined

// Функция обратного вызова, срабатываемая при обновлении позиции списка
updatePosition: undefined

// Функция обратного вызова, срабатываемая при запросе
requestCallback: undefined

// Функция обратного вызова, срабатываемая при выборе элемента списка
choiseCallback: undefined

// Шаблоны
templates: {
	// Шаблон списка
	list: '...'
	
	// Элемент списка
	item: '...'
	
	// Основной контейнер списка
	container: '...'
}

Методы

let autocomplete = new PipUI.Autocomplete('#autocomplete');

autocomplete.getID() // Вернет уникальный идентификатор автозаполнения

autocomplete.setOptions(object) // Изменить опции автозаполнения

autocomplete.getOptions() // Получить опции автозаполнения

autocomplete.request(value, callback) // Произвести запрос для получения списка
// Параметр value задает строку запроса
// Параметр callback является приоритетной функцией обратного
// вызова перед аналогичной функцией указанной через опции

autocomplete.update(value, callback) // Обновление списка автозаполнения
// Параметр value задает строку запроса
// Параметр callback является приоритетной функцией обратного
// вызова перед аналогичной функцией указанной через опции

autocomplete.updatePosition(callback) // Обновить позицию списка
// Параметр callback является приоритетной функцией обратного
// вызова перед аналогичной функцией указанной через опции

autocomplete.isOpenedContainer() // Текущее состояние списка

autocomplete.choise(index, callback) // Выбрать элемент из списка
// Параметр index является целым числом, начиная от 0
// Параметр callback является приоритетной функцией обратного
// вызова перед аналогичной функцией указанной через опции

События

Триггер	Описание	Инициатор
update-autocomplete-pipui	Срабатывает при обновлении списка результатов	.autocomplete-input
next-autocomplete-pipui	Срабатывает при переключении на следующий пункт списка	.autocomplete-input
prev-autocomplete-pipui	Срабатывает при переключении на предыдущий пункт списка	.autocomplete-input
update-position-autocomplete-pipui	Срабатывает при обновлении позиции списка	.autocomplete-input
request-autocomplete-pipui	Срабатывает при получении ответа на запрос	.autocomplete-input
choise-autocomplete-pipui	Срабатывает при выборе пункта из списка	.autocomplete-input