Auto Completar Tutorial – jQuery(Ajax) + PHP + MySQL

[Reeves]

Resultado:


Aposto que a maioria já viu isso em prática da mesma forma que apósto que todos acham muito útil essa tecnica!
então vamos ao que interessa...

A ideia é simples, na página html você digita seu pais, o ajax cuida para pegar letra por letra e enviar ao php, logo o php consulta no banco mysql e retorna um resultado limitado por 10 para o Ajax!

Irei anexar ao tópico o link para download do demontrativo, bastando modificar os dados referentes ao MySQL para que funcione.


Vejamos:

Javascript: jQuery   Nossa Função

Code Select Expand


<script src="jquery-1.2.1.pack.js" type="text/javascript"></script><script type="text/javascript">

function lookup(inputString) {
   if(inputString.length == 0) {
       // Hide the suggestion box.
       $('#suggestions').hide();
   } else {
       $.post("rpc.php", {queryString: "" inputString ""}, function(data){
           if(data.length >0) {
               $('#suggestions').show();
               $('#autoSuggestionsList').html(data);
           }
       });
   }
} // lookup

function fill(thisValue) {
   $('#inputString').val(thisValue);
  $('#suggestions').hide();
}

</script>



Vamos entender o Javascript

Ok, o código acima é a centro do script, isso nos permite enviar para o arquivo rpc.php que realiza todo o processamento.

A função de pesquisa pega a palavra no input e envia para a página rpc.php usando a função jQuery Ajax call POST.

IF o inputString é '0 '(zero), que esconde a caixa de sugestão, naturalmente, você não iria querer isso mostrando se não há nada na caixa de texto. para pesquisar.

ELSE pegamos a String do input e envia-lo para a página rpc.php, o jQuery $ post. Function (), veja..

Code Select Expand

[color=red]$.post(url, [data], [callback])[/color]

A parte 'callback' permite enviar os dados ao php, isto é onde a verdadeira magia, se é o que se pode chamar isso, acontece.

Se o comprimento de dados recebidos é superior a zero (isto é: há realmente algo para mostrar), mostra a caixa de sugestão e substitui o conteudo HTML com os dados retornados.

SIMPLES!


Vejamos o PHP codado para esse caso (RPC.php)

Code Select Expand

// PHP5 Implementation – uses MySQLi.
$db = new mysqli('localhost', 'root' ,", 'autoComplete');
if(!$db) {
   // Show error if we cannot connect.
   echo 'ERROR: Could not connect to the database.';
} else {
   // Is there a posted query string?
   if(isset($_POST['queryString'])) {
       $queryString = $_POST['queryString'];
       // Is the string length greater than 0?
       if(strlen($queryString) >0) {
       // Run the query: We use LIKE '$queryString%'
       // The percentage sign is a wild-card, in my example of countries it works like this...
       // $queryString = 'Uni';
       // Returned data = 'United States, United Kindom';

       $query = $db->query("SELECT value FROM countries WHERE value LIKE '$queryString%' LIMIT 10");
       if($query) {
           // While there are results loop through them – fetching an Object (i like PHP5 btw!).
           while ($result = $query ->fetch_object()) {
               // Format the results, im using <li> for the list, you can change it.          
               // The onClick function fills the textbox with the result.
               echo '<li onclick="fill(''.$result->value.'');">'.$result->value.'</li>';
           }
       } else {
           echo 'ERROR: There was a problem with the query.';
       }
   } else {
       // Dont do anything.
   } // There is a queryString.
} else {
   echo 'There should be no direct access to this script!';
}
}

?>

Explicando o PHP

Eu não vou entrar em muitos detalhes aqui, porque o codigo acima está comentado.

Basicamente, o que leva o 'QueryString' e faz uma consulta com um curinga no PT.

Isto significa que, cada letra digitada gera uma nova consulta.

O código PHP é a parte que você tem que mudar para trabalhar em seu sistema, e tudo o que está atualizando o "$ query" para seu banco de dados, você deve ser capaz de ver onde você coloca o nome da coluna na tabela de seu banco etc ...

CSS usado:

Code Select Expand

<style type="text/css">

.suggestionsBox {
   position: relative;
   left: 30px;
   margin: 10px 0px 0px 0px;
   width: 200px;
   background-color: #212427;
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   border: 2px solid #000;
   color: #fff;
}

.suggestionList {
   margin: 0px;
   padding: 0px;
}

.suggestionList li {
   margin: 0px 0px 3px 0px;
   padding: 3px;
   cursor: pointer;
}

.suggestionList li:hover {
   background-color: #659CD8;
}
</style>

E o minusculo HTML em nossa página:

Code Select Expand

<div>

      <div>

     Digite seu Pais:
<input size="30" id="inputString" onkeyup="lookup(this.value);" type="text" />

   </div>      <div class="suggestionsBox" id="suggestions" style="display: none;">

     <img src="upArrow.png" style="position: relative; top: -12px; left: 30px" alt="upArrow" />

     <div class="suggestionList" id="autoSuggestionsList">

</div>

   </div>

</div>



Puff, Auto Complete Feito  :P


Fonte: nodstrum.com

[#phobia]

Muito massa cara!

HTML cada vez mais extinto... rsrs


vlw reevu!

[remontti]

Muito bom, simples e pratico!!  ;)

Vou fazer download p/ meus arquivos... vai ser útil...

Vlw Reeves!
Ferias em Janeiro, descolei 15 dias, mas nao sei ainda a data certa! LOL

[Dkid]

@Phobia
HTML quase estinto ? Isso não tem sentido, uma vez que é a linguagem que te estrutura um site.

@Reeves
Muito cool o que mostras-te!

[KEst]

@Phobia
HTML quase estinto ? Isso não tem sentido, uma vez que é a linguagem que te estrutura um site.

¬¬'
pra começo html não é linguagem, é marcação, outra só com html que se faz site, não existe flash, java, ajax, não???
argh flws