Pixel Fórum
Bem vindo ao Pixel Fórum. Se registre-se.
Buscar
 
 

Resultados por:
 


Rechercher Busca avançada

Conectar-se

Esqueci minha senha

Últimos assuntos
» [Tutorial] Sing Animada
Ter Jan 08, 2013 5:32 pm por Dener

» [Tutorial] Efeito C4D
Ter Jan 08, 2013 5:29 pm por Dener

» [Abertura] - Pixel !
Ter Jan 08, 2013 4:56 pm por Dener

» Quebrando as Regras
Ter Jan 08, 2013 4:07 pm por Dener

» [Servidor] Mu - Walkman
Ter Jan 08, 2013 3:57 pm por Dener

» [Distração] O que gosta de fazer
Ter Jan 08, 2013 3:19 pm por VictorV.

» [Servidor] DDtank TB
Ter Jan 08, 2013 2:27 pm por Dener

» Fun.: We Are Young ft. Janelle Monáe
Ter Jan 08, 2013 2:25 pm por Dener

» Validação Inline De Formulário
Ter Jan 08, 2013 10:48 am por 

Top dos mais postadores
VictorV.
 
Dener
 
Kreitos
 
,Burn
 

Os membros mais ativos da semana

Os membros mais ativos do mês


Sugestão Na Pesquisa Com jQuery

Ir em baixo

Sugestão Na Pesquisa Com jQuery

Mensagem por  em Ter Jan 08, 2013 10:45 am

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.

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.

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

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.

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.

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.

Comunicação

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.

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.

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

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.

Créditos WebMaster


Pontos Pontos : 0
Data de inscrição Data de inscrição : 01/01/1970

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum