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.

Busca No Site

Objeto XMLHttpRequest

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.


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.

getJSON

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.

A Página



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

Se Algo For Digitado

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.


$(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.

Comunicação


if (termo != '')
{
$.getJSON("palavras.php",{termo:termo}, function(retorno){
if (retorno!='')
{
$('#dica').html('Você quer dizer: ' + 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'])));

$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.

Pesquisando Entre Os Dados

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

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 é “á”.

Consideração

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.

DOWNLOAD: Descarregue o código utilizado neste tutorial de Sugestão Na Pesquisa Com jQuery, em formato .zip.

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5.00 out of 5)

One Response

Leave a Reply to Daniela Cancel reply

Your email address will not be published. Required fields are marked *


Como Criar Um Site, Blog - WebMaster.pt