Função

Esse componente faz a seleção de múltiplas opções dentro da uma lista, com isso é possível vincular vários itens a um registro em relacionamentos 1 para N ou N para M. Os itens selecionados aparecerão em Labels e estarão destacados em cor diferentes na lista, além disso, o seu campo possui um filtro, restringindo sua lista a medida que o usuário digita.

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.

Configuração

Arraste o componente para o editor visual para abrir a janela de Configurações. Para Abrir a janela posteriormente, dê um duplo clique sobre o componente ou clique no botão "..." da propriedade Configurações (Figura 2.1).

Figura 2 - Janela de configuração

• Fonte de dados: define o conteúdo que fornecerá os dados para serem as opções do auto completar. Para saber mais sobre como configura uma fonte de dados, acesse o link ao lado: Fonte de dados .

  • "+": adiciona uma fonte de dados.

  • "...": configura uma fonte de dados.

• Placeholder: exibe alguma mensagem enquanto o campo estiver vazio, é possível internacionalizar o conteúdo através do ícone de internacionalização ao final do campo.

• Tipo Filtro: define a forma de filtro:

  • Iniciando com: mostra as opções que comecem com as letras digitadas;

  • Contendo: mostra as opções que contêm as letras digitadas;

  • Final com: mostra as opções que terminam com as letras digitadas.

• Campo Texto: define o atributo que será exibido na caixa de seleção.

• Campo Chave: define o identificador dos itens da lista.

• Fonte relacionada: adiciona a segunda fonte de dados para relacionamentos N para M;

• Campo relacionado: define os atributos da fonte de dados Relacionada que tem relação com a fonte de dados principal.

• Usar template personalizado: ao ser selecionado, adiciona a aba Elementos na janela de configuração.

Campo Texto e Campo Chave

Campo Chave define o conteúdo que será utilizado pelo sistema, enquanto o Campo Texto irá mostrar as opções na caixa de seleção. Eles podem ser iguais ou não.

Por exemplo, tem-se a opção com o Campo Texto chamado título e seu Campo Chave é id. Enquanto na tela será exibido os títulos dos jogos, o sistema estará usando o id no lugar.

Abas Cabeçalho e rodapé

As abas cabeçalho e Rodapé permitem adicionar texto e conteúdo HTML para inserir um item no início e no fim da lista. (Figuras 2.2, 2.3 e 2.4)

Figura 2.2 e 2.3 - Inserindo conteúdo no cabeçalho e rodapé da lista da caixa de seleção

Figura 2.4 - Resultado da configuração da figura 2.2

Aba Elementos

Nessa aba é possível personalizar o conteúdo exibido na lista, podendo inserir texto estático ou mais de um atributo. No exemplo da figura 2.5, além da frase que irá se repetir para cada item, foram adicionados dois atributos: nome e login.

A forma para exibir os dados da fonte de dados é : #: data.atributo #

Figura 2.5 - Utilizando template personalizado

Figura 2.6 - Resultado da configuração da figura 2.5

Fonte Relacionada

A caixa de seleção múltipla