webmaster

Sugestão Na Pesquisa Com jQuery

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. O nosso website está online! Explore a nova versão beta, onde terá acesso a novos recursos e melhorias. A sua experiência e feedback são muito importantes para nós! Novos artigos, todas as semanas! Fique atento.
Artigos SEO

Artigos SEO

Search Engine Optimization

Artigos WordPress

Criação de websites.

Tutoriais

Ensino numa série de passos simples

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)

Deixe o seu comentário, participe!

One Response

Leave a Reply

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


Versão Beta

Estamos a mudar

Olá, Somos criadores de conteúdo apaixonados por web design, programação, criação de websites e tecnologias digitais. Ajudamos os nossos clientes a levar o conteúdo certo às pessoas certas, criando artigos e recursos que facilitam a criação e otimização de websites.

Artigos Populares

Guia Prático Sobre Segurança Do Joomla

Dicas para diminuir substancialmente o número de vetores de ataque ao Joomla! Proteja o seu trabalho!

Os Segredos Do Sucesso Na Internet

A responsabilidade. O querer. O erro e a experimentação. O social. A memória da internet. Ser quem você é.

38 Ideias Espetaculares Para Sites De Empresas

Encontre inspiração nestes 45 exemplos de sites de empresas para criar o site da sua empresa.

Sugestão Na Pesquisa Com jQuery

O Maicon Sobczak explica como você pode criar uma pesquisa no seu site onde vai completando automaticamente o que o visitante está pesquisando, advinhando as palavras que ele quer pesquisar.