L’autocompletamento di un campo, una nuova ui di jQuery (2/2)

Nel precedente articolo abbiamo visto il principio di come implementare la funzione di autocompletamento messa a disposizione dalle user interface di jQuery.
L’abbiamo fatto tramite una lista predefinita di parole che abbiamo rappresentato tramite un array. Ora ci dedicheremo ad un caso più reale, ovvero quando questa lista di parole è contenuta in una tabella di un database.
Il lato client non cambierà di molto, mentre dovremo concentrarci particolarmente sul lato server allo sviluppo di uno script PHP per la gestione delle richieste.
Per fare questo, dovremo iniziare a chiarire il funzionamento di autocomplete.

Come inviare e ricevere i dati

La prima cosa che faremo sarà modificare il nostro script precedente in modo che come source non prenda più l’array parole (che possiamo anche cancellare a questo punto) ma il file source.php, in questo modo:

$(document).ready(function(){
    $("#enter").autocomplete({
        source: "source.php"
    });
});
 

Passando un file come source, il metodo autocomplete funzionerà in questo modo:

  • Ad ogni rilascio di tasto (keyup), verrà letto il contenuto del campo.
  • Il contenuto del campo verrà inserito nella variabile term ed inviato al file (nel nostro caso source.php) con il metodo GET tramite chiamata asincrona (AJAX).
  • Il file php dovrà restituire un risultato nella forma di un array del quale ogni elemento è una notazione in formato JSON contenente i dati di una riga della lista di suggerimenti.

Vediamo subito cosa significa questo ultimo ed ingarbugliato punto.

Poniamo di avere nel database una lista di nomi, e che i nomi che iniziano con la “m” siano: Maurizio, Mauro e Marco.
Se scriviamo la lettera “m” nel campo, cosa deve succedere?

  • Il file source.php dovrà intercettare la variabile term (che conterrà “m”)
  • Bisognerà cercare nel database i campi il cui contenuto inizia con la lettera “m”
  • Si dovrà infine creare l’array contenente i dati risultanti, in questa forma:
array({‘value’:’Maurizio’},{‘value’:’Marco’},{‘value’:’Mauro’});
 

Tramite questo formato, jQuery genererà la lista dei suggerimenti:

<li>Maurizio</li>
<li>Marco</li>
<li>Mauro</li>
 

Come è intuibile, con la chiave value, passiamo quello che dovrà essere il contenuto del tag <li>.
Ma potremmo decidere di far passare anche la chiave primaria del record (che potrebbe servirci in un secondo tempo) ed utilizzarla come id del tag. In questo caso, dovremo fare così:

array({‘value’:’Maurizio’,’id’:5},{ ‘value’: ‘Marco’,’id’:27},{‘value’:’Mauro’,’id’:75});
 

Il codice generato sarebbe questo:

<li id=”5”>Maurizio</li>
<li id=”27”>Marco</li>
<li id=”75”>Mauro</li>
 

Ma bando alle chiacchiere ed iniziamo a sviluppare la parte lato server.

Creare il database

Creiamo ora un semplice database nel quale potremo inserire dei nomi. Il database lo chiameremo autocomplete ed avrà un unica tabella chiamata nomi, della quale ti ho preparato la query; non hai che da eseguirla.

 CREATE TABLE `nomi` (
 `id` int(5) unsigned NOT NULL auto_increment,
 `nome` varchar(30) NOT NULL,
 PRIMARY KEY  (`id`)
 ) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=7 ;

 INSERT INTO `nomi` (`id`, `nome`) VALUES
 (2, 'Maurizio'),
 (3, 'Mauro'),
 (4, 'Marco'),
 (5, 'Luca'),
 (6, 'Luigi');

 

Creare il file con i parametri di connessione al database

Creiamo il file db_config.php nel quale definire le costanti contenenti di dati per la connessione al database:


define("HOST", "localhost");
define("USER", "root");
define("PASSWORD", "***********");
define("DB", "autocomplete");

Il file source.php

Creiamo ora un nuovo file e chiamiamolo source.php.
Come prima cosa includiamo il file di configurazione al database ed in seguito iniziamo a dichiarare la classe che chiameremo Autocomplete ed i membri term (nel quale inseriremo il valore passato dalla richiesta ajax) e conn (la risorsa di connessione al database).

include 'db_config.php';

class Autocomplete
{
    public $term;
    public $conn;
 

Creiamo ora un metodo per la connessione al database:

private function dbConnect()
{
    $this->conn = mysql_connect(HOST,USER,PASSWORD) OR die("Connessione non riuscita");
    mysql_select_db(DB, $this->conn) OR die("Impossibile selezionare il database");
}
 

Scriviamo ora il costruttore di classe nel quale valorizzeremo la proprietà term ed invocheremo il metodo di connessione al database dbConnect()

public function __construct()
{
    $this->dbConnect();
    $this->term = mysql_real_escape_string($_GET['term']);

}
 

Ed ora iniziamo a sviluppare il metodo printResult() che si occuperà di mandare in output il risultato nella forma che abbiamo visto precedentemente.
Come prima cosa costruiremo la query.

public function printResult()
{
    $sql = "SELECT id,nome
    FROM nomi
    WHERE nome LIKE '$this->term%'
    ORDER BY nome ASC";
 

Selezioniamo id e nome dalla tabella nomi, quando nome inizia per il contenuto della variabile che ci è stato inviato.

Ora eseguiamo la query ed inizializziamo i due array che ci serviranno in seguito.

$res = mysql_query($sql, $this->conn);

$return = array();
$arr = array();
 

Ora eseguiamo il ciclo in questo modo.

while($row = mysql_fetch_array($res))
{
    $arr['id'] = $row['id'];
    $arr['value'] = $row['nome'];
    array_push($return, $arr);
}
 

Per ogni risultato trovato, creiamo un array associativo ($arr) con l’id ed il nome ed alla fine aggiungiamo questo array come nuovo valore dell’array $return.
In questo modo però il risultato avrà questa forma:

array(array(“id”=>5,”value”=>”Maurizio”), array(“id”=>27,”value”=>”Marco”) ....);
 

Ma nessun problema:
Alla fine non dovremo fare altro che passare $return per la funzione json_encode(); in questo modo il risultato sarà corretto e potremo mandarlo in output.

Nota: la funzione json_encode è disponibile dalla versione 5.2 di PHP; quindi se sul tuo hosting che monta PHP 4.3 (e che nonostante questo continui a pagare) non funziona, non è colpa mia.

Di seguito ti riporto il contenuto per intero del file source.php:

include 'db_config.php';

class Autocomplete
{
    public $term;
    public $conn;

        public function __construct()
        {
            $this->dbConnect();
            $this->term = mysql_real_escape_string($_GET['term']);

        }

        private function dbConnect()
        {
            $this->conn = mysql_connect(HOST,USER,PASSWORD) OR die("Connessione non riuscita");
            mysql_select_db(DB, $this->conn) OR die("Impossibile selezionare il database");
        }

        public function printResult()
        {
            $sql = "SELECT id,nome
            FROM nomi
            WHERE nome LIKE '$this->term%'
            ORDER BY nome ASC";

            $res = mysql_query($sql, $this->conn);

            $return = array();
            $arr = array();

            while($row = mysql_fetch_array($res))
            {
                $arr['id'] = $row['id'];
                $arr['value'] = $row['nome'];
                array_push($return, $arr);
            }

            echo json_encode($return);
        }
}

$autocomplete = new Autocomplete();
$autocomplete->printResult();
 

Conclusione

In questi articoli abbiamo analizzato un’importante novità del framework jQuery. Il metodo autocomplete ci permette di implementare una funzionalità complessa con uno sforzo minimo. Basti pensare che il solo fatto di passare il file che si occupa di gestire le richieste al parametro source comporta che jQuery si occuperà di gestire tutto il resto (leggere il contenuto del campo, inviarlo al file, intercettare la risposta, generare la lista dei suggerimenti, e come se non bastasse, mostrare una gif di caricamento nel campo intanto che aspetta i dati; insomma un grosso lavoro).
Sono molto convinto che ogni programmatore dovrebbe dedicare del tempo allo studio di framework e teconolgie affini in modo da razionalizzare e velocizzare i propri processi produttivi. Cosa ne pensi?

Tag: ,

L'autore

Maurizio è sposato con la triade PHP - MySql - Apache e, non pago, ha un'amante chiamata jQuery. Ha un blog dove cerca di descrivere nei minimi particolari sia la moglie che l'amante. La sua vera specialità è la realizzazione di gestionali complessi anche se non rifiuta mai un sito web. +

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

60 commenti

Trackback e pingback

  1. Tweets that mention L’autocompletamento di un campo, una nuova ui di jQuery (2/2) | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by mtx_maurizio, Simone D'Amico. Simone D'Amico said: L’autocompletamento di un campo, una nuova…
  2. Come ordinare elementi con jQuery (1/2) | Your Inspiration Web
    [...] il nuovo ordinamento e soprattutto a renderlo definitivo? Questo sarà l’argomento del prossimo articolo che risulterà inevitabilmente un po’…