Realizziamo utilizzando il framework jQuery un filtro di ricerca su un insieme di dati memorizzati su un database. Il sistema dovrà funzionare nel seguente modo: quando un utente digita del testo nella search box, tramite Ajax scarichiamo i dati corrispondenti ai record filtrati e li scriviamo sotto il search box.
L’esempio è costituito da 4 file:
- jquery.js (file del framework, necessario per utilizzare jQuery)
- ricerca.html (file di presentazione dei dati)
- style.css (foglio di stile per la pagina di presentazione dei dati)
- search.js (file contenente il nostro codice javascript che si occupa di scaricare i dati tramite Ajax)
- getDati.php (script lato server che ci fornirà i dati filtrati)
La pagina di presentazione dei dati (ovvero ricerca.html) anche in questo caso ha una struttura molto semplice, in quando si limita a contenere una textbox per l’immissione dei dati da parte dell’utente ed un div con id “dati” dove scriveremo i dati ricevuti dallo script lato server tramite Ajax.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jquery.js" language="javascript" type="text/javascript"></script> <script src="search.js" language="javascript" type="text/javascript"></script> <link rel="stylesheet" href="style.css" type="text/css"/> <title>Ricerca REAL-TIME con Ajax</title> </head> <body> <center><h3>Ricerca Nominativi</h3> <br/> Filtra: <input type="text" size="25" id="searchbox" /> <br/><br/> <div id="dati"> </div></center> </body> </html>
Il file getDati.php riceve come parametro POST il testo da cercare (“t”) ed effettua una query sul database che estrae tutti i record che contengono dentro il cognome il testo del parametro “t” utilizzando una clausola SQL “LIKE”:
<?php header("content-type: text/xml"); header("Last-Modified: ".date("m/j/y h:i")); echo '<?xml version="1.0" encoding="utf-8"?>'; $conn = mysql_connect('localhost', 'root', ''); mysql_select_db('rubrica', $conn); $testo = $_POST['t']; $query = "SELECT id, nome, cognome FROM rubrica WHERE cognome LIKE \"%$testo%\""; $res = mysql_query($query, $conn); $linea = mysql_fetch_array($res, MYSQL_ASSOC); echo '<lista>'; while ($linea) { echo "<linea><id>".$linea['id']."</id><nome>".$linea['nome']."</nome><cognome>".$linea['cognome']."</cognome></linea>"; $linea = mysql_fetch_array($res, MYSQL_ASSOC); } echo '</lista>'; ?>
Ovviamente il codice è ridotto ai minimi termini, non avendo curato minimamente errori di codifica dei dati o questioni di sicurezza.
Guardiamo adesso il codice del file “search.js“, ovvero il file che fa funzionare il tutto tramite jQuery:
$(document).ready(function() { // Quando si verifica onKeyUp sulla searchbox $("#searchbox").keyup(function() { // Cancello il contenuto del div #dati $("#dati").empty(); // Ottengo il testo contenuto nella searchbox var testo = $(this).val(); // Richiedo i dati allo script lato server $.post("getDati.php", {t: testo}, function(data) { // Ottengo l'array degli elementi <linea> var a = $(data).children().children(); // Per ogni elemento di a $(a).each(function(i) { // Ottengo gli elementi <id>, <nome> e <cognome> var b = $(a.get(i)).children(); // Li scrivo sulla pagina $('#dati').append('<div class="contatto">'); $('#dati > .contatto:eq('+i+')').append('<div class="id">' + $(b.get(0)).text() + '</div>'); $('#dati > .contatto:eq('+i+')').append('<div class="nome">' + $(b.get(1)).text() + '</div>'); $('#dati > .contatto:eq('+i+')').append('<div class="cognome">' + $(b.get(2)).text() + '</div>'); }); }); }); // Lancia l'evento onKeyUp al caricamento della pagina $("#searchbox").keyup(); });
Le funzioni e gli oggetti utilizzati sono sostanzialmente gli stessi dell’articolo precedente. In questo caso però nel codice, come ultima istruzione, ho richiamato la funzione keyup() senza parametri. In questo modo non viene impostato il comportamento da seguire all’arrivo dell’evento onKeyUp, ma viene invece lanciato l’evento, facendo sì che, al caricamento della pagina ricerca.html, si esegua la funzione impostata per l’evento onKeyUp sulla searchbox.
Codice Sorgente: Ricerca Real Time jQuery (177)
Recent Comments