Função
O auto completar dinâmico possui a funcionalidade da caixa de seleção que filtra as opções à medida que o usuário digita no campo. Bastante utilizado em casos de pesquisa, para implementar essa lista de opções, utiliza-se dados de uma fonte de dados. Por exemplo, você quer fazer a busca por um filme e enquanto você digita o auto completar apresenta algumas opções que possam ser o que você procura, essas opções são exibidas a partir do conteúdo de uma fonte de dados.
Figura 1.1 - Exemplo do componente rodando no browser
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades (Figura 2) para o funcionamento básico do componente.
Nome | Propriedade | Função |
|---|---|---|
Configuração | options | Propriedade AngularJS que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação. |
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 é de 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 exibir 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 dinâmico.
Aba Geral
Figura 2.1 - 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 filtragem 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 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.2).
Nome em inglês
Dynamic Auto Complete
Nessa página
Compatibilidade
Formulário web
Equivalente mobile
Não possui
Botão do Componente
Imagem no Editor Visual