Função

O Auto completar dinâmico possui uma funcionalidade parecida com a Caixa de seleção dinâmica, porém filtra as opções à medida que o usuário digita no campo. Esse componente é bastante utilizado em casos de pesquisa, por exemplo, para buscar por um filme, o usuário digita e a medida que novas letras são inseridas, o auto completar dinâmico apresenta um novo filtro com novas opções. Para implementar essa lista de opções, utiliza-se a Fonte de dados.

Figura 1 - Exemplo do componente rodando no browser

Principais propriedades

Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente.

Aba de Estilos

Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente Auto completar dinâmico.

Configuração

Através da janela Configuração é possível personalizar o componente Auto Completar dinâmico.

Aba Geral

Exibe as configurações de fonte de dados e filtro.

Figura 2 - Janela de configuração

• Fonte de dados: seleciona ou cria uma fonte de dados para alimentar o componente.

  • "+": adiciona uma fonte de dados.

  • "...": configura a fonte de dados selecionada.

• Placeholder: sugere um exemplo do que pode ser inserido no campo - o ícone ao lado do campo permite internacionalizar o placeholder.

• Tipo Filtro: define a forma de filtro dos dados, podendo ser:

  • Contendo: mostra as opções que contêm a sequência das letras digitadas;

  • Iniciando com mostra as opções que comecem com a sequência das letras digitadas;

  • Final com mostra as opções que terminem com a sequência das letras digitadas.

• Campo Texto: define o campo da fonte de dados que será exibido para o usuário.

• Campo Chave: define o identificador do campo selecionado pelo usuário.

• Usar Template Personalizado: ao selecionar, a aba Elementos é exibida na janela de configuração.

Aba Cabeçalho

Na aba cabeçalho é possível inserir texto ou tags do HTML e adicionar um conteúdo no início da lista de opções exibidas pelo componente (Figura 2.1).

Figura 2.1 - O conteúdo acima foi renderizado no exemplo da figura 1

Aba Rodapé

Na aba rodapé é possível inserir texto ou tags do HTML e adicionar um conteúdo no final da lista de opções exibidas pelo componente (Figura 2.2).

Figura 2.2 - O conteúdo acima foi renderizado no exemplo da figura 1

Aba Elementos

A aba Elementos só é exibida ao selecionar a opção Usar Template Personalizado na aba Geral. Ela permite configura a apresentação das opções ao abrir a caixa de seleção, podendo mostrar outros campos da fonte de dados (Figura 2.3) ou texto estático.

A forma para exibir os campos da fonte é: #: data.CampoFonteDados #.

Figura 2.3 - O conteúdo acima foi renderizado no exemplo da figura 1

Expandir automaticamente

Essa propriedade permite exibir a lista de itens quando o campo de input está em foco.

Figura 3 - Configuração e resultado no browser da propriedade expandir automaticamente

Selecionar primeira opção ao sair

Essa propriedade selecionará o primeiro item da lista quando o usuário clicar fora do componente.

Figura 3.1 - Configuração e resultado no browser da propriedade
Selecionar primeira opção ao sair 

Texto quando não tem resultado

Essa propriedade exibirá uma mensagem informando que o valor buscado no campo não está contido na lista, geralmente essa mensagem vem por padrão escrita "No data found", mas é possível configurá-la de modo a exibir qualquer outra mensagem. No exemplo abaixo, configuramos a mensagem para exibir "Resultado não encontrado".

Figura 3.2 - Configuração e resultado no browser da propriedade
Texto quando não tem resultado