Jump to content
perdido_e_sozinho

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

Recommended Posts

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.

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. :cheesygrin:

Com os melhores cumprimentos,

Sérgio Matias


ser.gifsartim.gif

Share this post


Link to post
Share on other sites
deathseeker25

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.