Novo Site Alfamídia: pesquisando enquanto digita

Pretendemos publicar aqui algumas das técnicas e recursos utilizado no desenvolvimento do site da Alfamídia.

Contexto
Queremos facilitar e agilizar ao máximo o processo do visitante localizar cursos e turmas. Para isto, queremos pesquisar os cursos a medida que o usuário vai digitando sua pesquisa

Problema
Qual a melhor forma de fazer isto, especialmente considerando que as chamadas AJAX são assíncronas e, se o usuário digitar muito rápido, vai embaralhar as 'n' consultas enviadas ao servidor?

A Solução
Utilizando Javascript e Ajax, é perfeitamente possível implantar uma solução. Os passos são, grosso modo:

• Utilizamos javascript para ler o teclado;
• Criamos algum tipo de temporizador para aguardar se o usuário já parou de teclar ou vai digitar mais alguma coisa;
• Decidimos - se passou tempo suficiente sem uma nova tecla pressionada - fazer uma requisição AJAX;
• Trazemos os dados por JSONP;
• Apagamos e reconstruímos a estrutura que armazena as informações dos cursos.
• Exibimos na tela

Neste meio tempo, já arrancamos os cabelos lidando com temporizadores, amaldiçoamos cada versão de navegador já criada para a qual temos que testar o javascript, e passamos boa parte do tempo depurando código.

Felizmente, a solução que tivemos que implementar, e mostramos abaixo, utiliza, além de Javascript, JQuery e Knockout. JQuery nos esconde muitas idiossincrasias dos navegadores, e Knockout cuida de toda a questão de ler teclado e gerenciar temporizadores.

A esta altura, se não está familiarizado com estas tecnologias, vale digitar JQuery e Knockout no www.duckduckgo.com (ou no google, se você ainda usa) para navegar pelos tutoriais destas tecnologias.
Basicamente, faremos, então, os seguintes passos:

Vincular a atualização da variável 'pesquisa' a cada tecla pressionada:

   <input data-bind="value: pesquisa, valueUpdate: 'afterkeydown'" />

Definir a variável pesquisa como "observable" (isto é necessário para que ela seja automaticamente atualizada quando o usuário digita no campo)

   self.pesquisa = ko.observable();

Criar uma nova variável que é atualizada vinculada a variável "pesquisa", porém com delay de 1/2 segundo:


self.consulta = ko.computed(function () {
            return "pesq=" + self.pesquisa() + "&cat=" + self.categoria() + "&calendario=" + self.calendario();
}, this).extend({ throttle: 500 });

No caso específico de nosso site, outros parâmetros fazem parte do código, mas eles não são relevantes ao exemplo. O importante é que a variável consulta será automaticamente atualizada 1/2 segundo após a atualização da variável pesquisa. A vinculação entre variáveis e o delay de 1/2 segundo (throttle:500) são controlados pelo framework Knockout.


Vincular uma função a atualização da variável consulta:



        self.consulta.subscribe(function (newValue) {
            $.getJSON(""+baseSite+"/calendario.aspx?" + newValue + "&callback=?", function (allData)
   {
                self.paginacao = 1;
                var mappedTasks = $.map(allData, function (item) { return new ItemCalendario(item) });
                self.CalendarioCursos(mappedTasks);
                self.AjustaCalendarioAtualizado();
            });
        });

O comando acima basicamente especifica que, na atualização da variável "consulta" (1/2 segundo após a atualização da variável "pesquisa" em função de uma tecla pressionada), uma consulta JQuery usando JSONP é realizada. As funções fazem o mapeamento do resultado para uma estrutura de dados - como mostrado em tutoriais no site Knockout.

Após são chamadas funções que atualizam valores css que foram previamente mudados dinamicamente.