CakePHP è un framework web scritto in PHP, che segue i principi di Ruby on Rails e quindi permette un rapido sviluppo delle applicazioni.

La componente Ajax di CakePHP si basa su Prototype ma, l’estrema flessibilità del framework, ci permette di includere qualsiasi altra libreria Javascript.

Io utilizzo jQuery perché, con poche e comprensibili istruzioni, permette di fare cose davvero straordinarie e quindi ho pensato di scrivere un helper per CakePHP che implementasse l’autocomplete facendo delle richieste Ajax al server tramite l’ausilio di jQuery.

Il mio helper si chiama “jmycake” perché verrà ampliato ogni qualvolta avrò la necessità di jQuery all’interno delle mie applicazioni.

Ecco come ho è strutturato l’helper:

jmycake helper file

La funzione autocomplete aggiunge un blocco di codice JavaScript che si occuperà di:

• modificare le caratteristiche dell’input sul quale verrà effettuato l’autocompletamento
• effettuare le richieste Ajax verso il server
• visualizzare i risultati in una lista selezionabile anche con le freccette della tastiera
• autocompletare i campi passati come parametro alla funzione

Nel file app_controller.php sarà necessario inserire questa funzione:

Funzione da inserire in app_controller.php

Eh, come il buon pattern MVC vuole, creare la relativa vista:

Autocomplete View

La vista ha lo stesso nome della funzione (autocomplete), con estensione .ctp visto che utilizzo CakePHP 1.2 ed io l’ho posizionata nella directory “common” ma il file può essere salvato dove si vuole a patto di modificare questa riga nell’app_controller:


$this->render('autocomplete','ajax','/common/autocomplete');


C’è da ricordarsi inoltre di inserire ‘Jmycake‘ nell’array $helpers del vostro controller insieme a ‘Html‘, ‘Form‘ e ‘Javascript‘:


var $helpers = array('Html','Form','Javascript','Jmycake');


Io l’ho inserito direttamente in app_controller.php così è ereditario in tutti gli altri controller.

Adesso inseriamo in una vista di prova l’autocomplete.

Supponiamo che abbiamo questa vista:

View standard

Se desideriamo l’autocompletamento sul campo “nation“, sarà sufficiente aggiungere dentro ai tag del form:

<?php echo $jmycake->autocomplete('NationNation','Nation/nation',array('NationId'=>'id','NationIso'=>'iso')); ?>

Così facendo all’input con id “NationNation” verrà aggiunto l’autocompletamento che prenderà i dati dal modello “Nation”, cercando, le lettere inserite attreaverso l’input, nel campo “nation” (ecco perché il secondo parametro è Nation/nation”).
L’array passato come ultimo argomento contiene gli id dei campi di input da riempire ed il nome del campo da cui prendere i dati nel database.
La funzione autocomplete ha anche altri due parametri facoltativi che sono:

1. il numero di risultati da visualizzare nella lista dell’autocomplete
2. la lunghezza minima della stringa per effettuare le richieste

Per finire, vi mostro il mio CSS che renderizza i risultati:

Foglio di stile per l’autocomplete

Ovviamente va incluso sia il foglio di stile sopra mostrato che la libreria jQuery che si può scaricare liberamente dal sito.

Spero di essere stato utile a qualcuno e di ricevere qualche feedback positivo.