> For the complete documentation index, see [llms.txt](https://v2-0-0.pipui.ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://v2-0-0.pipui.ru/components/autocomplete.md).

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

## Общая информация <a href="#general-information" id="general-information"></a>

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

### Разметка <a href="#markup" id="markup"></a>

```html
<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">
```

{% embed url="<https://codepen.io/pipui/pen/mdzPNgv>" %}
Пример работы кода выше
{% endembed %}

## Атрибуты

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

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

### data-autocomplete-list

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

### data-autocomplete-url

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

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

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

### data-autocomplete-method

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

### data-autocomplete-key

Имя ключа, отправляемого в запросе на сервер. По умолчанию "<mark style="color:purple;">value</mark>".

Например, если мы хотим отправить значение "<mark style="color:green;">myvalue</mark>" из поля ввода методом <mark style="color:red;">GET</mark>, то запрос будет таким <mark style="color:red;">`GET`</mark>`['`<mark style="color:purple;">`value`</mark>`'] = "`<mark style="color:green;">`myvalue`</mark>`"`.&#x20;

### data-autocomplete-min

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

### data-autocomplete-max-items

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

## Javascript

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

### Инициализация <a href="#init" id="init"></a>

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

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

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

```html
<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: '...'
}
```

### Методы <a href="#methods" id="methods"></a>

```javascript
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 является приоритетной функцией обратного
// вызова перед аналогичной функцией указанной через опции
```

### События

<table><thead><tr><th width="267">Триггер</th><th width="283.3333333333333">Описание</th><th>Инициатор</th></tr></thead><tbody><tr><td>update-autocomplete-pipui</td><td>Срабатывает при обновлении списка результатов</td><td>.autocomplete-input</td></tr><tr><td>next-autocomplete-pipui</td><td>Срабатывает при переключении на следующий пункт списка</td><td>.autocomplete-input</td></tr><tr><td>prev-autocomplete-pipui</td><td>Срабатывает при переключении на предыдущий пункт списка</td><td>.autocomplete-input</td></tr><tr><td>update-position-autocomplete-pipui</td><td>Срабатывает при обновлении позиции списка</td><td>.autocomplete-input</td></tr><tr><td>request-autocomplete-pipui</td><td>Срабатывает при получении ответа на запрос</td><td>.autocomplete-input</td></tr><tr><td>choise-autocomplete-pipui</td><td>Срабатывает при выборе пункта из списка</td><td>.autocomplete-input</td></tr></tbody></table>