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

## Общая информация <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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://v2-0-0.pipui.ru/components/autocomplete.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.