Modulo Ricerca Dinamico

Lobbiettivo 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 dellutente, 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, lattributo 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 &amp;&amp; myRequest.status == 200) { e = document.getElementById("box");

e.innerHTML = myRequest.responseText; } } function Cerca() { var qualcosa = document.ricerca.testo.value; if(qualcosa.length&gt;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.chiavi.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). Linserimento di un valore random allinterno dellurl 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 allinterno 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 lutente 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.