Sugestão Na Pesquisa Com jQuery

Tentar adivinhar o que o usuário esta querendo procurar enquanto ele ainda digita o termo tem pelo menos três lados positivos. É mais provável que o usuário encontre de primeira o que esta procurando, já que nem sempre ele sabe ao certo a grafia correta. É mais provável que o internauta volte a visitar o site devido a uma boa experiência. E também haverá menos trafego de dados entre o servidor e o usuário final.

Popularizado pelo Google, este recurso interativo utiliza a técnica AJAX que possibilita alterar apenas algumas partes da página sem a necessidade de carregá-la novamente. Isto é chamado de requisição assíncrona, já que não existe a necessidade de sincronia entre o carregamento da página e o de dados.


O objeto utilizado no AJAX é o XMLHttpRequest, manipulado através de javascript e que efetua a comunicação com o servidor através de requisições HTTP.

É um objeto nativo padronizado nos navegadores atuais, mas implementado como controle ActiveX nas versões antigas do Internet Explorer, isto é 5 e 6. Isso significa que antes de criá-lo é necessário fazer uma verificação.

Código:

if (window.XMLHttpRequest)
{// navegadores atuais e IE7+
xmlhttp=new XMLHttpRequest();
}
else
{// para funcionar no IE6 e IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

Os métodos disponíveis são apenas dois, open() para abrir a requisição e send() para enviar os dados. E para receber, a propriedade é a ResponseXML.

Não vou entrar em maiores detalhes sobre o XHR já que este não é o objetivo do tutorial. A idéia é que você entenda como funciona a comunicação que vai acontecer por trás do código que vamos criar.


A função getJSON() disponibilizada pelo jQuery faz todo o trabalho de implementação e comunicação do objeto XHR que você teria que fazer no braço se resolvesse utilizar javascript puro. São diversas linhas a menos de código com maior clareza e legibilidade.

O getJSON serve exclusivamente para trabalhar com dados retornados no formato JSON é faz requisições somente via GET.

jQuery.getJSON( url, [data], [callback] )

O primeiro parâmetro é o endereço da página que proverá os dados. O segundo envia as variáveis para serem tratadas pela página e por último é definido o que acontece se a requisição for um sucesso.

Se você quiser modificar o código que será criado e precisar fazer requisições POST ou receber dados em outros formatos, pode utilizar a função ajax() que permite um maior controle sobre isso.

Vamos criar um simples formulário de pesquisa que oferece a funcionalidade de sugerir palavras baseadas no que o usuário esta digitando sem recarregar a página para isso.

Código:

    <form action="#" method="get">
        <fieldset>
            <p><label for="usuario">Termo:</label></p>
            <input type="text" name="termo" size="30" class="width233" id="termo" />
            <input type="submit" name="ok" value="ok" />
        </fieldset>
    </form>
        <div id="dica"></div>

Atenção especial para o id criado no campo texto e a div que receberá os dados retornados pelo servidor.


Ao pressionar uma tecla ela faz o movimento para baixo keydown e para cima, keyup. Quando o usuário digitar algo no campo de pesquisa e soltar a tecla, o código começa a rodar.

Código:

$(function(){
  $('#termo').keyup(function(){
var termo = $(this).val().trim();
})
})

A variável “termo” vai receber o valor existente neste (this) input que teve a tecla pressionada e ao mesmo tempo retira os espaços da string com o trim no final para evitar requisição por nada, como por exemplo um espaço em branco.

Código:

if (termo != '')
{
  $.getJSON("palavras.php",{termo:termo}, function(retorno){
    if (retorno!='')
    {
      $('#dica').html('<i>Você quer dizer:</i> ' + retorno.join(', ')); 
    } else {
      $('#dica').html('Sem sugestões.'); 
    }
  })     
}else {
  $('#dica').empty(); 
}

Se a variável receber algum valor a requisição ao servidor será feita, caso contrário a div que recebe as sugestões será esvaziada com o empty.

Na requisição passamos o nome do arquivo a ser pesquisado, o valor da variável e iniciamos a função em caso de sucesso.

Retornando algum valor a div recebe as palavras separadas por vírgula (papel do join). Caso não for retornado valor é informado que não existe sugestão.

Validando E Criando Os Dados

Vejamos como fica o arquivo que será pesquisado.

$termo = strtolower(trim(strip_tags($_GET['termo'])));

Código:

$num_letras = strlen($termo);
$dicionario = array ('Brasil','Portugal','Estados Unidos','Alemanha','Reino Unido','Camarões','Dinamarca','França','Guatemala','Haiti','Irlanda','Japão','Marrocos','Namíbia','China','Rússia','Índia','Afeganistão','Arabia Saudita','Chile','Argentina','Espanha');
$sugestao = array();

Sendo uma informação recebida pelo usuário é importante nos precavermos sobre o que esta sendo recebido, por isso o strip_tags, que retira tags HTML e PHP de uma string. Nesta mesma linha também é retirado os espaços no início e final da string com o trim e os caracteres são convertidos para minúsculas com o strtolower.

A variável seguinte recebe o número de caracteres (string length) do termo digitado.
Também é criada uma array com o nome de alguns países que serão pesquisados pelo código. A última variável irá conter os paises filtrados a serem sugeridos.


O que foi digitado pelo usuário será comparado com o nome dos países existentes para formar a lista de sugestões.

Código:

foreach($dicionario as $pais)
{
  if ($termo == substr(strtolower($pais),0,$num_letras))
  {
    $sugestao[] = $pais;
  }
}
echo json_encode($sugestao);

O foreach faz a varredura na array que contém o nome dos paises e passa os valores retornados como verdadeiros para a variável “pais”.

Dentro do foreach é criada uma condicional que compara o valor digitado pelo usuário com os valores da array.

Na condicional é utilizada a função substr, que pega apenas uma parte de uma string, tendo como primeiro parâmetro a string da qual será extraído o conteúdo, depois a posição que inicia a contagem e o número de caracteres a ser extraídos.

Por exemplo: a variável $termo tem o valor “al”, o substr conta dois caracteres (numero de letras da variável) a partir do inicio do nome do país e compara o pedaço com o da variável. Como existe um país que começa com “al” o resultado desta comparação é “Alemanha”.

Na hora de comparar, o substr difere maiúsculas de minúsculas, por isso o nome dos países é passado para minúsculas antes de efetuar a comparação.
Retornando um valor da condicional, a variável “sugestao” recebe os valores e armazena como uma array.

Terminada a verificação, os valores encontrados são formatados com o json_encode e enviados com o echo.

Cuidado especial com o JSON que somente funciona se os caracteres estiverem formatados em UTF8. Se for enviado um “á” para formatação o resultado será undefined. O certo é “á”.


Para utilizar esta solução em websites de grande tráfego e com banco de dados, é necessário tomar o cuidado de evitar o excesso de requisições HTTP. Armazene o resultado das requisições e antes de conectar novamente ao banco de dados verifique antes no arquivo ou variável com os resultados da primeira pesquisa.

Créditos WebMaster