[PHP+MySQL] Também quero um Google Suggest (Ajax,Tableless)

[perdido_e_sozinho]

De facto a Web 2.0 veio para ficar, e e um dos exemplos disso é o google suggest. Para que não sabe é uma melhoria ao google convencional que permite saber os resultados das pesquisas enquanto se digita a pesquisa.

http://img112.imageshack.us/img112/9944/17lj3.jpg

Durante um trabalho tive a necessidade de fazer algo do género, e descobri que existem 1001 maneiras de o fazer, muitas delas muito complexas. Após alguma pesquisa e muitas horas de teste finalmente consegui fazer algo funcional e decente.

Aqui estou então pronta para partilhar esta informação.

Para começar precisam de fazer o download do script.aculo.us que é o motor desta suggest box, e que torna muito simples o nosso trabalho (este script consegue também criar efeitos visuais muito bons).

Em seguida copiem os ficheiros com a extenção .js para a pasta onde ficará o vosso site.

Terão de criar dois ficheiros um para colocar a caixa e outro para obter os resultados da base de dados.

Código a colocar no primeiro ficheiro.

O estilo da caixa de texto

<style type="text/css">

     #autocomplete_choices {
      position:absolute;
      width:250px;
      background-color:white;
      border:1px solid #888;
      margin:0px;
      padding:0px;
    }
    #autocomplete_choices ul {
      list-style-type:none;
      margin:0px;
      padding:0px;
    }
    #autocomplete_choices ul li.selected {
background-color: #054191;
margin: 0px;
padding: 2px;
color: #FFFFFF;
}
    #autocomplete_choices ul li {
      list-style-type:none;
      display:block;
      margin:0;
      padding:2px;
      cursor:pointer;
    }

</style>

O script de Java que permitirá à caixa localizar os ficheiros

<script language="javascript" src="prototype.js" ></script>
<script language="javascript" src="scriptaculous.js" ></script>

A Caixa de Texto, a layer que vai mostrar os resultados e a inicializção do script.

<input name="Cidade_Localidade" id="Cidade_Localidade" type="text"  value="" size="32" autocomplete="off" />
<div id="autocomplete_choices"></div>
<script type="text/javascript"> new Ajax.Autocompleter("Cidade_Localidade", "autocomplete_choices", "ficheiro2.php?return=autocomplete",{})</script>

O script funciona de forma simples por isso poderão facilmente personalizar o ficheiro.

new Ajax.Autocompleter("Id da caixa de texto", "layer que vai mostrar os resultados", "localização do ficheiro de pesquisa",{})

No segundo ficheiro vamos colocar o seguinte código

<?php

$ajax = ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' ? true : false);

switch($_GET['return'])
{
    case 'autocomplete':
         header("Content-Type: text/xml");

// Se alterarem o id da textbox alterem também aui o id
$search = (isset($_POST['Cidade_Localidade']) ? $_POST['Cidade_Localidade'] : '');

// Para listas dinâmicas usem este seguemento
$hostname_Ligacao = "Host Name";
$database_Ligacao = "Base de Dados";
$username_Ligacao = "Utilizador";
$password_Ligacao = "Password";
$Ligacao = mysql_pconnect($hostname_Ligacao, $username_Ligacao, $password_Ligacao) or trigger_error(mysql_error(),E_USER_ERROR); 

mysql_select_db($database_Ligacao, $Ligacao);
$sql = "SELECT Cidade_Localidade FROM tab_garagens";
$result = mysql_query($sql, $Ligacao) or die(mysql_error());

$conta=0;
while( $row=mysql_fetch_assoc($result) )
{
$array[$conta] = $row['Cidade_Localidade'];
$conta=$conta+1;
}
mysql_free_result( $result );

// Para Resultados Fixos usem somente este segumento de código
//
        //$array = array('Aveiro','Santarem','Porto','Aveiro',
        //                'Evora','Faro');
            
            autocomplete($search,$array);
            exit();
        break;
}

function autocomplete($needle,$haystack) {
      $html = '<ul class="autocomplete" id="list">';                    
      foreach($haystack as $straw) {
          if($needle != '' && stristr($straw, $needle)) {
              $html .= '<li class="autocomplete">'.$straw.'</li>';
          }
      }   
      $html .= '</ul>';
      echo $html;
  }

?> 

Bem e assim fica feita a caixa de texto com suggest.

É bem provável que tenham algumas dificuldades a entender o seu funcionamento, mas assim que entenderem como funciona torna-se algo extremamente útil.

Espero que vos seja útil. 😁

Com os melhores cumprimentos,

Sérgio Matias

[deathseeker25]

Boa explicação. Vou ver se adapto isso para o site da revista. 🙂