Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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, é necessário inserir manualmente quais são os valores que irão aparecer para completar o campo. O componente é um campo de pesquisa em que as opções só são exibidas no momento que o usuário começa a digitar o texto, exibindo sugestões em vez de opções

Figura 1.1 - Exemplo do componente rodando no browser

Principais propriedades

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

Nome

Propriedade

Função

Configuração

options

Abre uma janela para personalização do componente.

Conteúdo

content

Define o rótulo.

Valor

ng-model

Propriedade AngularJS que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação.

Requerido

ng-required

Define que o campo é preenchimento obrigatório.

identificador

id

Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente.

Exibir

ng-show

Propriedade AngularJS usada para mostrar ou oculta o componente.

Segurança

cronapp-security

Abre a janela de seleção dos grupos com permissões para visualização ou edição.

Classes CSS

class

Adiciona classes CSS que já foram criadas.

Configuração

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

Aba Geral

Figura 2.1 - Janela de configuração

  • 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 como será feita a pesquisa.

    • 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: são as opções que aparecerão a medida que o usuário digitar na caixa do auto completar.

  1. Editar: abre uma janela para fazer a edição do item correspondente;

  2. Excluir: exclui o item correspondente.

  • Usar Template Personalizado: Ao marcar, a aba Elementos é adicionada ao lado da aba Rodapé.

Adicionar novo campo texto

Clique no botão + para abrir a janela onde será inserido o novo Campo Texto (Figura 3.1).

Figura 2.2 - Adicionar novo campo texto

Aba cabeçalho

Na aba cabeçalho é possível adicionar texto ou tags do HTML - podendo ser de parágrafo, imagem, entre outros - e, assim, criar uma área no início da lista de opções exibidas pelo componente (Figura 2.3).


Nome em inglês

Auto Complete


Nessa página

Table of Contents
maxLevel3
printablefalse

Compatibilidade

  • Formulário web


Equivalente mobile

Não possui.


Botão do Componente


Imagem no Editor Visual


Figura 2.3 - Configuração e resultado no browser da aba cabeçalho



Aba rodapé

Na aba rodapé é possível adicionar texto ou tags do HTML - podendo ser de parágrafo, imagem, entre outros - e, assim, criar uma área no início da lista de opções exibidas pelo componente (Figura 2.4).



Figura 2.4 - Configuração e resultado no browser da aba rodapé



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.4) ou texto estático. A modificação só ocorre na lista de opção, ao confirmar uma opção o conteúdo adicional da aba Elementos desaparecerá.

A expressão para exibir os dados do campo texto da caixa é: #: data.value #, mas é possível inserir qualquer caractere antes ou depois dessa expressão (Figura 2.5).



Figura 2.5 - Configuração e resultado no browser da aba elementos