Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
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 a Fonte 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. |
Âncora configuracoes configuracoes
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
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 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
Â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. 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
Índice maxLevel 3 printable false
Compatibilidade
Formulário web
Equivalente mobile
Não possui.
Botão do Componente
Imagem no Editor Visual