Faltam -1 dias! Inscreva-se agora! O maior encontro de profissionais web da américa latina.

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!