Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
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.
![](/download/attachments/172736516/componenteBrowser.png?version=1&modificationDate=1641585910000&api=v2)
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 - 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
Índice | ||||
---|---|---|---|---|
|
Compatibilidade
Formulário web
Equivalente mobile
Não possui.
Botão do Componente
Imagem no Editor Visual
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).
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 #.
Figura 2.4 - Configuração e resultado no browser da aba elementos