Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
Função
O auto 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 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.
Image Modified
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
Image Modified
Figura 2.1 - Janela de configuração
Dica |
---|
A janela de Configuração possui por padrão as abas: Geral, Cabeçalho e Rodapé. A aba Elementos aparece ao marcar a opção Usar Template Personalizado como verdadeira. |
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
Image Removed
Image Modified
Figura 2.2 - 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.3).
Image Modified
Image Removed
Figura 2.3 - 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 forma para exibir os campos da fonte é: #: data.CampoFonteDados #.
Image Modified
Image Removed
Figura 2.4 - Configuração e resultado no browser da aba elementos
Nome em inglês
Dynamic Auto Complete
Nesta página
Índice maxLevel 3 printable false
Compatibilidade
Formulário web
Equivalente mobile
Não possui.
Botão do Componente
Image Added
Imagem no Editor Visual
Image Added