iMasters | Por uma internet mais criativa e dinâmica

Quarta-feira, 18/10/2006 - 12:03 - Por Fernando Incerti
Seções relacionadas:

• ActionScript
• Flash

• Imprimir
• Indicar
• Digg it
• Del.icio.us
• Twitter
• 9 comentários

Continuando a série Formulários, imaginem um formulário com um ComboBox que lista clientes os cadastrados, e o nome deste cliente é João. Porém, só de João, na lista de clientes são 150: João da Silva, João dos Santos e por aí vai... Ficaria muito ruim sair rolando o combo até achar o João certo, não é?

Diante deste problema, escrevi uma classe que filtra os dados do ComboBox enquanto o usuário digita, mostrando somente os dados referentes ao que foi digitado.

Vale lembrar que não importa de onde ComboBox tenha recebido os dados. No exemplo abaixo usei nomes de cores, e o resultado final é este:

Agora, mãos na massa.

1º Passo: Criar um arquivo .as chamado Filtro.as que deve conter o seguinte código:

//início da classe Filtro
class Filtro {
//define função a pública setFiltro
//o parâmetro cb vai receber o nome do combobox a ser filtrado
//como esta função não vai retornar nenhum valor, a declaramos como Void
public function setFiltro(cb:Object):Void {
//este array serve para armazenar os dados originais do combobox
var dp:Array = new Array();
//este array serve para armazenar os dados do combobox para depois passar para o array dp
var dados:Array = new Array();
//nesta variável, armazenaremos o valor digitado no combobox
var texto:String;
//aqui atribuímos o provedor de dados do combobox
dados = cb.dataProvider;
//neste laço armazenamos os dados originais do combobox
for (var i in dados) {
dp.push({data:dados[i].data, label:dados[i].label});
}
//criamos um ouvinte de eventos para o combobox
var cbListener:Object = new Object();
cbListener.change = function() {
//ao digitar algo abre o combobox
cb.open();
//convertemos o texto digitado no combobox para minúsculas
texto = cb.text.toLowerCase();
//este array vai receber somente os dados que satisfazem o filtro
var dadosFiltrados:Array = new Array();
//neste laço comparamos o valor digitado com todos os valores do combobox
for (var i in dp) {
//agora comparamos o valor do label de todos os índices do array
//o substring serve para comparar a palavra digitada com um número
//correspondente de caracteres do label do índice atual já convertida para minúscula
if (dp[i].label.substring(0, texto.length).toLowerCase() == texto) {
//caso o valor digitado seja igual ao trecho de caracteres do índice atual
//armazenamos estes dados
dadosFiltrados.push(dp[i]);
}
}
//removemos todos os itens no combobox para receber os novos já filtrados
cb.removeAll();
//atribuimos os dados filtrados ao combobox
cb.dataProvider = dadosFiltrados;
//após o removeAll, o texto digitado no combobox também é removido, etão devolvemos
//o valor digitado para ele
cb.text = texto;
//aqui posicionamos o cursor após o último caracter digitado
Selection.setSelection(texto.length, texto.length);
};
//e por fim adicionamos o ouvite de eventos ao combobox
cb.addEventListener("change", cbListener);
}
}

Pronto!

Agora é só criar um novo arquivo .fla e salvá-lo no mesmo diretório que o Filtro.as Para usar, basta declarar um novo objeto do tipo Filtro:

//declara o objeto Filtro
var filtroCB:Filtro = new Filtro();
//agora passamos os parâmetros para o método setFiltro, onde cb é o nome de instância do ComboBox
filtroCB.setFiltro(cb);

Se preferir, baixe os arquivos usados no exemplo aqui!

Espero que seja muito útil, e até a próxima.

Um grande abraço!

Todos os artigos de Fernando Incerti

18/10/2006 - Filtrando os dados de um ComboBox 01/09/2006 - Mascarando campos TextInput e TextField

9 comentários publicados

• 1. Show!!!

  Quinta-feira, 19/10/2006, por marco antonio soares
  

  Muito bom camarada...

  Responder comentário

• 2. opa !

  Terça-feira, 28/11/2006, por Leonardo Marinho
  

  e se os dados forem dinâmicos, vierem de um banco com a interação do PHP

  Responder comentário

• 3. Indiferente

  Terça-feira, 28/11/2006, por Fernando Incerti
  

  Como citei no início do artigo, não importa de onde venham os dados, pode ser por Array, AMFPHP, LoadVars, PHP, ASP, JAVA, CF, Manualmente, etc... pois a filtragem acontece somente depois que ComboBox já está populado

  Responder comentário

• 4. Amigo por favor me ajude.

  Quarta-feira, 29/11/2006, por Leonardo Marinho
  

  tenho um ComboBox que os dados estão vindo do banco com interação do php.
  
  var objRecebe = new LoadVars();
  
  cm_areatema.addItem("","")
  // Quando os valores forem carregados
  objRecebe.onLoad = function(ok){
  if (ok){
  for (var i = 0; i<this.tamanho; i ){
  cm_areatema.addItem(this["area" i],this["codarea" i]);
  }
  tx_codcont.text = tx_codcont.text (Number(this.codcont) 1);
  }
  };
  // Carrega as variáveis do arquivo PHP
  objRecebe.load("consultatema.php");

  Responder comentário

• 5. oi

  Quarta-feira, 29/11/2006, por Leonardo Marinho
  

  oi

  Responder comentário

• 6. oi

  Quarta-feira, 29/11/2006, por Leonardo Marinho
  

  ai tá complicado pra entender.

  Responder comentário

• 7. ver ai !!

  Quarta-feira, 29/11/2006, por Leonardo Marinho
  

  olha o exemplo dos dados vindo do banco de dados com interação do php, e o filtro não está funcionando.
  
  http://www.verticejuridico.com/leo/exemplo.html
  
  queria uma ajuda se possível

  Responder comentário

• 8. Só uma questão de lógica

  Sexta-feira, 01/12/2006, por Fernando Incerti
  

  Não funciona por que você cria o objeto filtro antes de popular os dados, ai acontece que o construtor da classe pega os dados do combo antes de ele ser populado, você deve usar var filtroCB:Filtro = new Filtro();
  filtroCB.setFiltro(marca);
  
  somente depois de ter populado no seu caso
  
  criar o objeto após a chave que fecha o if(ok)
  
  pronto, faça isso e vai estar funcionando

  Responder comentário

• 9. valeu !

  Sexta-feira, 01/12/2006, por Leonardo Marinho
  

  valeu cara foi vacilo meu mesmo!! valeu mesmo.. fico muito grato por vc ter me ajudado.

  Responder comentário

Poste um comentário

(clique se não for cadastrado)

Login: Senha: Titulo: digite aqui seu comentário Site/blog: Enviar Receber notificação de novos comentários

Sobre o autor

Fernando Incerti é Web Developer/Designer, atuante na área de desenvolvimento de sistemas on-line, graduando em Tecnologia de Desenvolvimento para Internet. Desenvolve sistemas em tecnologias Java, Delphi, PHP e ActionScript.

Indique para um amigo

Escreva aqui sua mensagem! ok

Tags relacionadas

linux seguranca celular microsoft desenvolvimento php windows lançamento google brasil 3g iphone mobile internet publicidade mercado twitter android tecnologia yahoo apple crescimento youtube ti criação web

TI SHOP Produtos iMasters

• Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
• Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
• DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
• DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!