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.
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
<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.
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('<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'])));
$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 [4], em formato .zip.
