- Criado por Deborah Melo de Carvalho, última alteração em 04/10/2019
Você está vendo a versão antiga da página. Ver a versão atual.
Comparar com o atual Ver Histórico da Página
« Anterior Versão 2 Próxima »
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.
Editar: abre uma janela para fazer a edição do item correspondente;
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
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
- Sem rótulos