Função

O auto completar é uma funcionalidade da caixa de seleção que filtra as opções a medida que o usuário digita no campo. Esse componente possui valores fixos, ou seja, tem-se que definir quais são os valores que irão aparecer para completar o campo.

Figura 1 - Auto completar

A concepção de sua utilização fica na ideia de criar um campo de pesquisa em que as opções somente apareceriam no momento em que o usuário começasse a digitar o texto, fazendo ter uma ideia de sugestões em vez de opções.

Configuração

A configuração do componente é a mais importante das propriedades, pois é através dela que todos os ajustes como o placeholder, os valores que irão aparecer no auto completar e como será definido a filtragem.

Ao selecionar o componente na área de trabalho da IDE, será apresentado a aba de propriedades no campo direito. O menu de "..." que aparece ao lado do campo de configuração permite que você faça as configurações e nela contém as abas geral, template cabeçalho e template rodapé.

Figura 2 - Menu de configuração

Geral

1. Placeholder: mostra um texto na caixa de seleção que serve para auxiliar o usuário o que ele precisa fazer, mas seu uso é opcional. Ao lado do campo, tem-se o ícone para fazer a internacionalização do texto do placeholder.
2. Tipo Filtro: define a forma como será feita a pesquisa.
   • Contendo: mostra as opções que contêm as letras digitadas
   • Iniciando com mostra as opções que comecem com as letras digitadas.
   • Final com mostra as opções que terminem com as letras digitadas
3. Valor Chave: são as opções que aparecerão na caixa de seleção a medida que o usuário digitar.

Adicionar novo valor chave

Para adicioná-lo, basta clicar no botão + que abrirá uma janela para definir. As opções para como vai ser o tipo do valor chave é apresentado ao lado da caixa e são eles: texto, numérico, data e hora, hora, lógico e expressão. Mas, através do clique no ícone destacado, é possível trazer novas formas de dados para adicionar valores.

Figura 3 - Adicionar novo valor chave

Template Cabeçalho

 Ele cria uma área no início da lista de opções exibidas na caixa de seleção utilizando tags de HTML, podendo ser de parágrafo, imagem, etc.

Figura 4 - Configuração e resultado na adição de um template cabeçalho

Template Rodapé

Ele cria uma área no fim da lista de opções exibidas na caixa de seleção utilizando tags de HTML, podendo ser de parágrafo, imagem, etc.

Figura 5 - Configuração e resultado na adição de um template rodapé