/* CODIFICANDO */

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;
}

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é? :-)