Olá amigos. Desculpe pelos período que se passou, mas aqui estamos novamente com a série.

Pré-requisitos:

• Introdução ao XAJAX;
• Formulários com XAJAX.

Tenho me deparado frequentemente em meu e-mail com uma dúvida de leitores me perguntando:

“André, como faço para popular uma caixa de listagem (combo box)?”

Eis que darei a vocês a solução neste artigo. Com JavaScript, ou mesmo AJAX puro, podemos fazer isso de forma muito simples, é só ter os valores que se desejam filtrar. Mas é ai que complica, pois na marioria das vezes temos esses valores dentro de um banco de dados, e precisamos de conectar a ele e excutar queries para buscar os valores. É ai que o XAJAX entra em campo de sola.

Como em artigos anteriores já explicamos como registrar funções no XAJAX, passar parâmetros para as funções e outros, vou me ater somente à função que irá popular a caixa de listagem. Criei uma tabela em meu banco de dados para utilizar aqui com a seguinte estrutura:

CREATE TABLE `cidades` (
`id_cidade` int(10) unsigned NOT NULL auto_increment,
`cidade` varchar(75) default NULL,
`uf` char(2) default NULL,
PRIMARY KEY (`id_cidade`),
KEY `id_cidade` (`id_cidade`),
KEY `idx_uf` (`uf`)
);

A tabela cidades é bem simples, mas percebam que eu criei um índice idx_uf para agilizar as pesquisas. Abaixo segue a função:

Populando Caixa de Listagem com XAJAX

• Linhas 19 a 23 – Nesta linhas nós habilitamos o campo cidade e limpamos o valores existentes no mesmo. Caso tenha sido efetuada uma pesquisa anterior, podem existir valores. O valor 1 é para que ele não limpe o “——– Selecione ——–” que existe no campo.
• Linha 26 – Uma query simples busca na tabela cidades todas as cidades que tenham o valor do campo uf iguais ao parametro passado na variável $uf.
• Linhas 31 a 35 – Nestas linhas são passados os parâmetros para que o JavaScript se encarregue de popular o combo box. Na linha 31 passamos os valores que vêm do resultado da query na ordem ‘LABEL’, ‘VALUE’ e na linha 33 especificamos o nome do combo box que irá receber as novas opções. Em nosso caso, cidade.

Não é tão difícil quanto parece, e é um recurso muito útil pois é muito irritante você efetuar uma busca que não existe em um site e com este recurso você consegue popular suas caixas de listagem somente com os valores existentes em seu banco de dados e disponíveis para buscas.

Olhem um exemplo abaixo:

• Site 1 – www.mundiauto.com.br. Procurem por, Automóvel > Fiat > Punto, e vejam o resultado.
• Site 2 – www.autospravoce.com.br. Façam a mesma pesquisa.

Vocês irão perceber que o Site 2 não mostra o modelo do carro, pois não tem disponível no banco para pesquisas. Do que adianta ter todos os modelos de carros do mundo em seu site se não existe nenhum carro? Pensem nisso.

Todos os exemplos funcionando utilizados neste artigo estão aqui.

Tenham um ótima semana e um abraço.