Função
O Auto completar dinâmico possui uma funcionalidade parecida com a Caixa de seleção dinâmica, porém filtra as opções à medida que o usuário digita no campo. Esse componente é bastante utilizado em casos de pesquisa, por exemplo, para buscar por um filme, o usuário digita e a medida que novas letras são inseridas, o auto completar dinâmico apresenta um novo filtro com novas opções. Para implementar essa lista de opções, utiliza-se do Componente visual fonte de dados.
Figura 1 - Exemplo do componente rodando no browser
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente.
Nome | Propriedade | Função |
|---|---|---|
options | Abre a janela de configuração do componente. | |
Título | content | Define o rótulo. |
Valor | ng-model | Propriedade Angular que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação. |
| Expandir automaticamente | auto-expand | Valor booleano informando se o campo irá ou não expandir no momento em que o usuário clicar sobre ele. |
| Selecionar primeiro opção ao sair | first-option-on-blur | A primeira opção da lista sempre ficará selecionada. |
| Texto quando não tem resultado | no-results-message | Altera o texto exibido quando não existe opção pesquisada. O texto padrão é "No data found". |
Requerido | ng-required | Define que o campo é de preenchimento obrigatório. |
| Desabilitado | ng-disabled | Directiva usada para desabilitar um componente quando a expressão vinculada for verdadeira. |
| Texto quando requerido | validationMessage | Exibe a mensagem informada ao tentar submeter o formulário com o campo vazio. A propriedade Requerido (ng-required) deve estar configurada com "sim". |
identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
| Estilo | style | Altera o estilo geral do componente da forma inline. |
Exibir | ng-show | Propriedade Angular usada para mostrar ou oculta o componente. |
| Repetir | crn-repeat | Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados. |
Segurança | cronapp-security | Abre a janela de seleção dos grupos com permissões para visualização ou edição. |
| Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Aba de Estilos
Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente Auto completar dinâmico.
| Nome em português | Nome em inglês | Descrição |
|---|---|---|
Entrada de Dados | Input | Estiliza a entrada de dados do componente. |
Título | Title | Estiliza o título do componente. |
Plano de fundo lista de Itens | List Items Background | Estiliza o plano de fundo da lista de itens do componente. |
Itens da Lista | List Item | Estiliza os itens do componente. |
Item da Lista Hover | List Item Hover | Estiliza o item da lista Hover do componente. |
Configuração
Através da janela Configuração é possível personalizar o componente Auto Completar dinâmico.
Aba Geral
Exibe as configurações de fonte de dados e filtro.
Figura 2 - Janela de configuração
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 filtro 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.
Usar Template Personalizado: ao selecionar, a aba Elementos é exibida na janela de configuração.
Aba Cabeçalho
Na aba cabeçalho é possível inserir texto ou tags do HTML e adicionar um conteúdo no início da lista de opções exibidas pelo componente (Figura 2.1).
Figura 2.1 - O conteúdo acima foi renderizado no exemplo da figura 1
Aba Rodapé
Na aba rodapé é possível inserir texto ou tags do HTML e adicionar um conteúdo no final da lista de opções exibidas pelo componente (Figura 2.2).
Figura 2.2 - O conteúdo acima foi renderizado no exemplo da figura 1
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.3) ou texto estático.
A forma para exibir os campos da fonte é: #: data.CampoFonteDados #.
Figura 2.3 - O conteúdo acima foi renderizado no exemplo da figura 1
Expandir automaticamente
Essa propriedade permite exibir a lista de itens quando o campo de input está em foco.
Figura 3 - Configuração e resultado no browser da propriedade expandir automaticamente
Selecionar primeira opção ao sair
Essa propriedade selecionará o primeiro item da lista quando o usuário clicar fora do componente.
Figura 3.1 - Configuração e resultado no browser da propriedade
Selecionar primeira opção ao sair
Essa propriedade exibirá uma mensagem informando que o valor buscado no campo não está contido na lista, geralmente essa mensagem vem por padrão escrita "No data found", mas é possível configurá-la de modo a exibir qualquer outra mensagem. No exemplo abaixo, configuramos a mensagem para exibir "Resultado não encontrado".
Figura 3.2 - Configuração e resultado no browser da propriedade
Texto quando não tem resultado
Nome em inglês
Dynamic Auto Complete
Nesta página
Compatibilidade
Formulário web
Equivalente mobile
Não possui.
Botão do Componente
Imagem no Editor Visual
