Автозаполнение помогает при вводе части запроса выдавать подходящие под него результаты без необходимости вводить запрос целиком.
Разметка
<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
Срабатывает при переключении на предыдущий пункт списка
