Autocompletion avec ZendX_JQuery sur une grosse liste de données issues d’une base de données

CinePhil — Fri, 01 Apr 2011 14:02:36 +0000

Il existe des tutoriels assez bien faits pour insérer dans un formulaire Zend Framework une zone de liste en autocomplétion, en utilisant le composant ZendX_JQuery_Form_Element_Autocomplete, mais ceux-ci sont basés sur une courte liste de données dans un tableau PHP.

Ce petit tutoriel vous donne la solution pour avoir la même chose mais en allant chercher parmi une grosse quantité de données issues d’une base de données.

Je base cet exemple sur la recherche parmi les 36 682 communes françaises stockées dans une base MySQL mais ça doit être assez facilement adaptable à d’autres données.
Le code fourni fonctionne avec Zend Framework 1.11.1, JQuery 1.4.4, jquery-ui-1.8.7.custom.

1) Il faut, bien entendu, que JQuery soit installé et configuré pour fonctionner avec votre projet !

– J’ai ceci dans le layout (à adapter à votre version de la bibliothèque JQuery et à son emplacement) :

1
2
3
4

$this->JQuery()->setLocalPath($this->baseUrl() . '/js/jquery/development-bundle/jquery-1.4.4.js');
$this->JQuery()->addStyleSheet($this->baseUrl() . '/js/jquery/development-bundle/themes/smoothness/jquery-ui-1.8.7.custom.css');
$this->JQuery()->setUiLocalPath($this->baseUrl() .'/js/jquery/development-bundle/ui/jquery-ui-1.8.7.custom.js');
echo $this->jQuery();

– J’ai ceci dans le bootstrap :

1
2
3
4
5
6
7
8
9

protected function _initJQuery()
{
$this->bootstrap('view');
$view = $this->getResource('view');
$view->addHelperPath('ZendX/JQuery/View/Helper/', 'ZendX_JQuery_View_Helper');
$viewRenderer = new Zend_Controller_Action_Helper_ViewRenderer();
$viewRenderer->setView($view);
Zend_Controller_Action_HelperBroker::addHelper($viewRenderer);
}

2) Passons au code utile à l’autocomplétion en commençant par le modèle et en y créant une fonction qui extrait l’identifiant et le nom des communes à partir du début du nom :

1
2
3
4
5
6
7
8
9
10
11
12

public function getCommunesParDebutNom($debut)
{
$debut = $debut.'%';
$sql = "
SELECT cmn_id, cmn_nom
FROM tr_commune_cmn
WHERE cmn_nom LIKE :debut
";
$communestrouvees = $this->_db->fetchAll($sql, array('debut' => $debut));

return $communestrouvees;
}

3) Ensuite, ajoutons d’abord le helper d’action JQuery Autocomplete dans l’initialisation du contrôleur :

1
2
3
4
5
6
7

public function init()
{
// Ajout du helper d'action JQuery autoComplete
Zend_Controller_Action_HelperBroker::addHelper(
new ZendX_JQuery_Controller_Action_Helper_AutoComplete()
);
}

4) Puis, toujours dans le contrôleur, créons une fonction qui va générer la source du champ autocomplete :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

public function recherchecommunesAction()
{
$request = $this->getRequest();
$debut = $request->getParam('term');

$commune = new Application_Model_DbTable_Commune();
$result = $commune->getCommunesParDebutNom($debut);

$listecommunes = array();

foreach($result as $cmn)
{
$listecommunes[$cmn['cmn_id']] = $cmn['cmn_nom'];
}
$this->_helper->json(array_values($listecommunes));
}

=> L’action recherchecommunes fait appel à la fonction du modèle.

5) Passons au formulaire et créons l’élément autocomplete :

1
2
3
4
5
6
7
8
9
10
11
12

$baseurl = Zend_Controller_Front::getInstance()->getBaseUrl();

// Commune
// FIXME Ne donne pour le moment que le nom de la commune et pas son identifiant
$etb_id_commune = new ZendX_JQuery_Form_Element_AutoComplete('etb_id_commune');
$etb_id_commune
->setLabel('Commune')
->setRequired(false)
->setFilters(array('StripTags'))
->setJQueryParam('autoFill', true)
->setJQueryParams(array('source' => $baseurl.'/gereretablissements/recherchecommunes')
);

=> La source de l’élément autocomplete est l’url de l’action recherchecommunes (ici dans le contrôleur gereretablissements).
=> Remarquez aussi le FIXME… il me reste à peaufiner l’utilisation de JQuery ! Ce qui m’oblige pour le moment à avoir ce traitement des données postées par l’utilisateur dans le contrôleur :

1
2
3
4
5
6

// Recherche de l'identifiant de la commune
// FIXME A revoir quand le JQuery_Autocomplete retournera directement l'id
$nom_commune = $form->getValue('etb_id_commune');
$commune = new Application_Model_DbTable_Commune();
$result = $commune->getCommuneParNom($nom_commune);
$data['etb_id_commune'] = (int)$result['cmn_id'];

6) Rien de spécial dans la vue :

echo $this->form->etb_id_commune;

Blog de CinéPhil » Zend Framework

Autocompletion avec ZendX_JQuery sur une grosse liste de données issues d’une base de données