Skip to content
outubro 2, 2007 / cassiomarques

E depois do autocomplete com ajax, o que eu aprendo tio?

Outro dia aqui no trabalho precisei implementar em uma aplicação web o mesmo comportamento de uma de nossas aplicações desktop. Esta aplicação desktop possui uma tela com um campo no qual o usuário digita nomes e o sistema busca no banco diversos dados para todas as pessoas cujo nome case com o que foi digitado, criando uma tabela com estes dados. O usuário digita uma nova letra ou apaga algo que havia digitado anteriormente e a tabela é atualizada.

Pensei: Como fazer isso em javascript? Simples, um pouco de JSON e manipulação do DOM resolvem o problema. Como no projeto WEB eu já uso o DWR e ele me devolve objetos convertidos em JSON, ficou fácil, mas pode-se utilizar qualquer esquema de Ajax que trabalhe com JSON.

Usando o Prototype, a solução fica assim:

Suponha que você possua uma classe hipotética do lado servidor do tipo

public class Pessoa {
    private String codigo;
    private String nome;
    private String rg;

    //getters e setters...
}

No meu caso, usei o DWR para pesquisar por uma lista de objetos da classe Pessoa cujo atributo nome batesse com o nome que o usuário digitou (implemente isso no seu DAO). Chegando no Javascript, essa lista (ou array) deve conter objetos mais ou menos assim:

{
    {codigo:'0001', nome:'Jose da Silva', rg:'32343433-3'},
    {codigo:'0002', nome:'Fulano Beltrano', rg:'27323233-3'},
    {codigo:'0003', nome:'Maria da Silva', rg:'12346783-3'},
}

Tendo no seu HTML um input com id=’pesquisa’, o evento para o mesmo ficaria:

Event.observe($('pesquisa'), 'keyup', function(event) {
    if($F('pesquisa').length > 5) {
        pesquisar();
    }
} );

Sua função pesquisa() seria responsável por buscar a lista de objetos para alimentar a tabela. Não vou escrevê-la aqui pois a mesma varia de implementação dependendo do que você está usando para Ajax na sua aplicação.
Você deve também ter um div onde a tabela será criada.
Essa função pesquisa() deverá chamar uma outra função, responsável pela criação da tabela a partir da lista de objetos recebida:

function criarTabela(lista) {
  var params = [‘codigo’, ‘nome’, ‘rg’]; //nome dos atributos dos objetos da lista que serao inseridos na tabela
  var widths = [’80px’,’220px’,’70px’]; //largura para as colunas
  $(‘tabela_div’).innerHTML = ”;
  var tabela = document.createElement(‘table’);
  tabela.appendChild(createHeader());
  var tr;
  var td;
  var text;
  for(var i = 0; i < lista.length; ++i) {   tr = document.createElement('tr');   for(var j = 0; j < params.length; ++j) {   td = document.createElement('td');   text = document.createTextNode(lista[i][params[j]]);   td.appendChild(text);   td.setAttribute('width', widths[j]);   tr.appendChild(td);   }   tr.setStyle({cursor:'pointer'});   Event.observe(tr, 'click', function(event){   //crie aqui a lógica para o evento acionado ao se clicar   //em cada linha da tabela!   });   tabela.appendChild(tr);   }   $('tabela_div').appendChild(tabela); } function createHeader() {   var titulos = ['Codigo', 'Nome', 'RG']; //titulos para as colunas da tabela   var tr = document.createElement('tr');   var td;   var text;   titulos.each(function(t){   td = document.createElement('td');   text = document.createTextNode(t.unescapeHTML());   td.appendChild(text);   td.addClassName('columntitle');   tr.appendChild(td);   });   return tr; }[/sourcecode] O legal aqui é que com o evento criado para cada linha da tabela podemos, por exemplo, preencher um formulário com os valores da linha clicada.Mais legal que autocomplete, né? :-)

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: