# Autocomplete

Para os casos em que é preciso realizar uma busca mas você ainda não tem um cognitivo, utilize o autocomplete. Ele irá apresentar uma lista de opções aproximada à pesquisa realizada.

Caso deseje configurar, acesse a aba input e em seguida selecione a opção autocomplete no ícone `?`.

![](https://776911411-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MBjaNm5lB1Yqgih1JCA%2Fuploads%2FOJJhjtgsZPvDIyWJN9kF%2FAUTOCOMPLETE.gif?alt=media\&token=73377a8b-0eff-46b0-9003-a2a715158afd)

{% hint style="info" %}
Recurso disponível apenas no canal Widget
{% endhint %}

### Estrutura

```json
{
    "default": {
        "type": "autocomplete",
        "payload": {
            "delay": 4000
            "options": [
                {
                    "title": "<opção 1>",
                    "value": "<valor da opção 1>"
                },
                {
                    "title": "<opção 2>",
                    "value": "<valor da opção 2>"
                },
                {
                    "title": "<opção 3>",
                    "value": "<valor da opção 3>"
                }
            ],
            "cognitive": "true|false"
        }
    }
}
```

#### Atributos

* **type:** autocomplete
* **payload:**
  * **cognitive (default: true):** determina se a mensagem será enviada para curadoria ou não
  * **delay (opcional):** tempo (milissegundos) de atraso antes da próxima opção aparecer.
  * **options:** opções que serão exibidas ao usuário a medida que ele digita
    * **title:** título (label) da opção que estará visível ao usuário
    * **value (opcional):** valor que será enviado ao Altu ao escolher a opção. Se não for definido, será passado o próprio `title`

### Exemplo

{% tabs %}
{% tab title="Configuração" %}

```javascript
{
    "default": {
        "type": "autocomplete",
        "payload": {
            "options": [
                {
                    "title": "Como consulto minha conta de energia?",
                    "value": "conta"
                },
                {
                    "title": "Como consulto minha fatura de energia?",
                    "value": "fatura"
                },
                {
                    "title": "Estou sem luz, o que eu faço?",
                    "value": "queda"
                },
                {
                    "title": "Como consulto minha fatura de luz?",
                    "value": "fatura"
                }
            ]
        }
    }
}
```

{% endtab %}

{% tab title="Widget" %}
![](https://776911411-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MBjaNm5lB1Yqgih1JCA%2F-MDWEpoCyl9Vi2GtIjUq%2F-MDWOSIak5VpMEVoHq0M%2Fautocomplete.gif?alt=media\&token=89ffd0bd-6fe5-44d6-846b-9f0de20b6c33)
{% endtab %}
{% endtabs %}