L’obbiettivo di questo tutorial è realizzare un modulo di ricerca dinamico simile a quello fornito da Google.
Ciò di cui abbiamo bisogno a priori è di due tabelle nel nostro database:

• Una contenente esclusivamente delle chiavi ri ricerca o tag  (essenzialmente stringhe)
• Una invece contenente i dati, quindi ciò che cerchiamo

Realizzeremo un campo di input dove ad ogni aggiunta di caratteri da parte dell’utente, sarà presentata una finestra a comparsa con le possibili ricerche da effettuare.
In altre parole, tramite la tecnologia Ajax produrremo una query sul nostro database ad ogni aggiunta di caratteri nel campo del form.

Definiamo innanzitutto un semplice form:

<form method='post' name='ricerca' action='ricerca.php'>
	<table border="0">

	<tr><td>Ricerca:</td>
	<td><input type="text" name="testo" onkeyup='Cerca()'
	style="width:300px"/></td>
	<td><input type="submit" value="Cerca" /></td></tr>

	<tr><td></td><td><div id='box'
	style="width:300px"></div><td></td></tr>

	</table>
</form>

Senza soffermarci troppo sullo stile utilizzato, il quale è del tutto personalizzabile, notiamo la presenza di un div con id box che dovrà contenere le possibili chiavi di ricerca.
Da notare inoltre, l’attributo onkeyup per il campo di testo che ci permetterà di richiamare una funzione Ajax che di seguito andiamo a descrivere:

<script type="text/javascript">
var myRequest = null;

function CreateXmlHttpReq(handler) {
 	var xmlhttp = null;
	try {
    	xmlhttp = new XMLHttpRequest();
  	}catch(e){
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  xmlhttp.onreadystatechange = handler;
  return xmlhttp;
}

function myHandler() {
    if (myRequest.readyState == 4 && myRequest.status == 200) {
        e = document.getElementById("box");
        e.innerHTML = myRequest.responseText;
    }
}

function Cerca() {
	var qualcosa = document.ricerca.testo.value;
    if(qualcosa.length>2){
    	var r = Math.random();
    	document.getElementById("box").style.display = "block";
    	myRequest = CreateXmlHttpReq(myHandler);
    	myRequest.open("GET","ricerca_chiavi.php?cercare="+escape(qualcosa)+"&r="+escape(r));
    	myRequest.send(null);
    }
}

function ConfermaChiave(){
	var chiave = document.ricerca.chiavi.options[document.ricerca.chiavi.selectedIndex].text;

	document.ricerca.testo.value=chiave;
	document.getElementById("box").style.display = "none";
}
</script>

Le funzioni CreateXmlHttpReq e myHandler sono le classiche funzioni che permettono di implementare una richiesta Ajax.
La funzione che ci permetterà di invocare una chiamata al server è la funzione Cerca che andremo brevemente a descrivere:
Innanzitutto preleviamo la stringa dalla form, controlliamo che questa non sia troppo corta per evitare di effettuare ricerche in relazione a soli 1 o 2 caratteri. Successivamente rendiamo visibile il contenuto del nostro box ed effettuiamo la chiamata ad una pagina (nel nostro caso PHP). L’inserimento di un valore random all’interno dell’url ci permette di ingannare il browser in caso di richieste uguali e quindi evitare il caching.
La funzione ConfermaChiave verrà descritta successivamente.
Andiamo ora a descrivere il file ricerca_chiavi.php:

<?php
  // prelevo la stringa da cercare
  $stringa = $_GET['cercare'];

  // preparo connessione al database
  $dbhost = "localhost";
  $dbname = "nome_database";
  $dbuser = "user";
  $dbpass = "password";

  // connessione a server mysql
  $conn = mysql_connect($dbhost,$dbuser,$dbpass)
  	or die("Impossibile collegarsi a MySQL.");

  // connessione a database
  mysql_select_db($dbname,$conn)
  	or die("Impossibile selezionare il database $dbname");

  // preparo la query
  // ATTENZIONE : la query è solo un esempio,
  // in questo caso interrogo una tabella
  // con tutte le possibili chiavi di ricerca
  $sql = "SELECT * FROM chiavidiricerca WHERE chiave='".$stringa."'";

  // effettuo la query
  $risultato = mysql_query($sql,$conn)
  	or die( "Errore: " . mysql_error() );

  // prelevo tutte le chiavi trovate
  // realizzo una select dalla quale l'utente sceglierà
  // la chiave di ricerca tra quelle proposte
  // (questo passo è personalizzabile utilizzando ad esempio un div)
  echo "<select name='chiavi' style='width:300px'
  size='6' onchange='ConfermaChiave()'>";
  while($chiavi = mysql_fetch_array($risultato))
  {
  echo "<option value='".$chiavi['id']."'>".$chiavi['chiave']."</option>";
  }
  echo "</select>";
?>

Lo script PHP effettua il lavoro lato server. Il suo compito è abbastanza semplice:
Effettua una query sul database e realizza una select che conterrà tutte le chiavi di ricerca trovate. Questa select sarà visibile all’interno del div box, quindi al disotto del modulo di ricerca.

Andiamo ora a descrivere il funzionamento della funzione javascript ConfermaChiave. Tale funzione viene invocata nel momento in cui l’utente seleziona dalla select una chiave di ricerca (vedi onchange), il suo compito è quello di rendere invisibile il box delle chiavi trovate e impostare nel campo di input della form la chiave scelta.

Il modulo dinamico in Ajax è così concluso, la successiva pressione della submit effettuerà la ricerca in database in relazione alla chiave precedentemente scelta.