Função
O Auto completar dinâmico possui a uma funcionalidade similar à da caixa Caixa de seleção que dinâmica, mas filtra as opções à medida que o usuário digita no campo. Bastante Esse componente é amplamente utilizado em casos situações de pesquisa, para implementar essa lista de opções, utiliza-se dados de uma Fonte de dados. Por exemplo, você quer fazer a busca ao buscar 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 , o usuário começa a digitar e, à medida que novas letras são inseridas, o Auto completar dinâmico atualiza as opções exibidas com base no novo filtro. Para implementar essa lista de opções, utiliza-se o Componente visual fonte de dados.
Figura 1. 1 - Exemplo do componente rodando no browser
Principais propriedades
Aba de Propriedades
Na tabela abaixo estão descritas as principais propriedades (Figura 2) para o funcionamento básico do componente.
Nome | Propriedade | Função | |
|---|---|---|---|
options | Propriedade AngularJS que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação. | Abre a janela de configuração do componente. | |
TítuloConteúdo | content | Define o rótulo. | |
Valor | ng-model | Propriedade AngularJS 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 | cron-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 AngularJS Angular usada para exibir 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
esta descritoestã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. |
Âncora configuracoes configuracoes
Configuração
Através da A janela Configuração é possível personalizar o componente Auto Completar dinâmico.
Aba Geral
possui diversas propriedades para personalizar e adicionar novos elementos ao componente. Para abrir a janela de configurações, selecione o componente no editor visual, exibindo suas propriedades no menu lateral, e clique no botão “...” da propriedade "Configuração" (Figura 2).
A janela possui 3 abas fixas e mais 1 que é exibida apenas ao habilitar uma opção.
| Âncora | ||||
|---|---|---|---|---|
|
Aba Geral
Possui as principais propriedades do componente e exibe as configurações de fonte de dados e filtro.
Figura 2 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 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;.
- Não permitir seleção fora da lista: quando habilitado, impede que a opção selecionada seja apagada, a menos que a opção vazia do início da lista seja selecionada.
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 aba Elementos é é exibida na janela de configuração.
Âncora abaCabecalho abaCabecalho
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).
A aba Cabeçalho permite adicionar texto e conteúdo HTML para ser exibido na caixa de seleção, antes da lista.
Figura 2.1 - Inserindo conteúdo no cabeçalho da lista do componente
O conteúdo inserido nessa aba será exibido na área destacada pelo item 1 da figura 2.2.
Figura 2.2 - Configuração e resultado no browser da aba cabeçalhoResultado da configuração da figura 2.1
| Âncora | ||||
|---|---|---|---|---|
|
Aba Rodapé
Na aba rodapé 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).
e elementos HTML para incluir no fim da lista.
Figura 2.3 - Inserindo conteúdo no rodapé do componente
O conteúdo inserido nessa aba será exibido na área destacada pelo item 1 da figura 2.4.
Figura 2.4 - Resultado da configuração da figura 2.3
| Âncora | ||||
|---|---|---|---|---|
|
Aba Elementos
A aba Elementos só é será exibida ao selecionar marcar a opção Usar Template Personalizado na 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 #.
Nela podemos definir como serão exibidos os itens da lista para seleção, é possível inserir tanto atributos do objeto de forma dinâmica quanto conteúdo estático, além de alguns recursos de HTML e Javascript (high-code). A modificação só ocorre na lista de opção, ao confirmar uma opção o conteúdo personalizado não será exibido.
Para exibir os atributos dos itens da fonte de dados, use a seguinte notação: #: data.<Campo da Fonte de dados> #
No exemplo abaixo, listamos o nome e o e-mail do usuário do objeto, porém, no nome do usuário adicionamos uma função Javascript (toUpperCase) para deixar todos os caracteres em maiúsculo.
Veja como manipular os atributos do objeto no tópico Exemplo de personalização do Template.
Figura 2.5 - Utilizando template personalizado
O conteúdo inserido nessa aba afetará a lista destacada pelo item 1 da figura 2.6.
Figura 2.7 - Resultado da configuração da figura 2.6
| Âncora | ||||
|---|---|---|---|---|
|
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
| Âncora | ||||
|---|---|---|---|---|
|
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
| Âncora | ||||
|---|---|---|---|---|
|
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 que o usuário desejar. No exemplo abaixo, configuramos a mensagem para exibir "Resultado não encontrado".
Figura 3.2 Figura 2.4 - Configuração e resultado no browser da propriedade Texto quando não tem resultado
Âncora exemploPersonalizacaoDoTemplate exemploPersonalizacaoDoTemplate
Exemplo de personalização do Template
A aba Elementos permite utilizar elementos de HTML e Javascript (High-code) para manipular os atributos do objeto. Esses elementos podem ser utilizados principalmente quando é necessário incluir mais de um atributo ou se houver a necessidade de exibir os itens da lista de maneira distinta.
Os métodos Javascript devem ser utilizados com base no tipo do dado do atributo selecionado, por exemplo: Date, String, Number, Boolean etc. Além disso, pode ser necessário utilizar if ternário para tratar valores nulos (Figura 4.1).
| Dica |
|---|
Outra alternativa para manipular os atributos exibidos sem utilizar as configurações do componente Auto completar dinâmico é criando um Campo Calculado na Fonte de dados vinculada e, em seguida, selecioná-lo no Campo Texto na aba Geral. Os Campos calculados podem ser alimentados a partir do retorno de uma função de bloco de programação. |
Na figura abaixo vemos um componente Auto completar dinâmico vinculado a um atributo do tipo data sem personalização de templates na aba Elementos.
Figura 4 - Atributo de data sem a personalização de template
No exemplo abaixo, a aba Elementos está utilizando um if ternário para validar se o atributo de data está nulo, caso esteja, não exibirá nada (''). Se o atributo é diferente de nulo, utilizará o método concat para concatenar o atributo "name" com o atributo "dataNasc" que foi formatado utilizando o método toLocaleDateString.
Figura 4.1 - Templates usados para o tratamento de datas
O resultado das alterações da figura 4.1 podem ser vistas na figura abaixo.
Figura 4.2 - Atributo de data com a personalização de template
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
Imagem no Editor Visual
