Auto-completion avec Zend et jQuery

Version imprimable

Dans cette discussion, j'exposais mes tentatives avec un autocomplete en Zend_Dojo mais sans succès.

J'essaie avec Jquery qui semble bien plus simple à mettre en oeuvre mais j'ai un message d'erreur quand je tape une première lettre.

Je précise de suite que j'ai aussi dans ce formulaire un ZendX_JQuery_Form_Element_DatePicker qui fonctionne parfaitement, ainsi qu'un autre ZendX_JQuery_Form_Element_AutoComplete avec un jeu de données plus petit que je peux charger en même temps que le formulaire et qui fonctionne très bien lui aussi.

Dans le formulaire, j'ai ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// Celui qui fonctionne
$etablissement = new Application_Model_DbTable_Etablissement();
        $result = $etablissement->fetchAll();
        $liste_etablissements = array();
        $liste_etablissements[0] = '';
        foreach($result as $etb)
        {
            $liste_etablissements[$etb->etb_id] = $etb->etb_nom;
        }
 
        $etb_id = new ZendX_JQuery_Form_Element_AutoComplete('etb_id');
        $etb_id
            ->setLabel('Nom')
            ->setRequired(false)
            ->setFilters(array('StripTags'))
            ->setJQueryParams(array('source' => $liste_etablissements)); 
 
// Celui qui pose problème
$id_commune_etablissement = new ZendX_JQuery_Form_Element_AutoComplete('id_commune_etablissement');
        $id_commune_etablissement
            ->setLabel('Commune')
            ->setRequired(false)
            ->setFilters(array('StripTags'))
            ->setJQueryParams(array('url' => $baseurl.'/accueiletudiant/recherchecommunes',
                                    'minChars' => 1));

Dans le modèle Commune.php, j'ai créé cette fonction :

Code:

1
2
3
4
5
6
7
8
9
10
    public function getCommunesParDebutNom($debut)
    {
        $debut = $debut.'%';
        $sql = "
            SELECT cmn_id, cmn_nom 
            FROM tr_commune_cmn 
            WHERE cmn_nom LIKE :debut 
        ";
        return $this->_db->fetchAll($sql, array('debut' => $debut));
    }

Dans le contrôleur, j'ai créé cette fonction :

Code:

1
2
3
4
5
6
7
8
    public function recherchecommunesAction()
    {
        $request = $this->getRequest();
        $debut = $request->getParam('term');
 
        $commune = new Application_Model_DbTable_Commune();
        $result = $commune->getCommunesParDebutNom($debut);
        $this->_helper->autoComplete($result);

Le formulaire s'affiche rapidement mais j'obtiens l'erreur suivante quand je tape une première lettre dans la zone :

Citation:

http://localhost/stagmas/public/accu...ommunes?term=L 500 Internal Server Error

Action Helper by name AutoComplete not found.

Je sens que je ne suis pas loin de la solution mais...

25/01/2011, 15h48
manuscle

Citation:

Envoyé par CinePhil

Action Helper by name AutoComplete not found.

je croit que autocomplete est une aide d'action qui ne concerne que Dojo, si tu as désactivé Dojo au profit de Jquery, il est peut etre normal que cette aide d'action ne soit pas trouvée.
25/01/2011, 22h08
CinePhil

Je ne pense pas non.
Dans l'arborescence de Zendx je trouve :
ZendX/JQuery/Controller/Action/Helper/AutoComplete.php
ZendX/JQuery/Form/Element/AutoComplete.php
ZendX/JQuery/View/Helper/AutoComplete.php

Et dans le formulaire, j'ai déjà un AutoComplete et un DatePicker qui fonctionnent.

J'avance mais ce n'est pas encore tout à fait ça.

Grâce à ce tutoriel vidéo, j'ai modifié le code de la fonction recherchecommunes dans le contrôleur en mettant json à la place de autocomplete :
Code:

1 2 3 4 5 6 7 8 public function recherchecommunesAction() { $request = $this->getRequest(); $debut = $request->getParam('term'); $commune = new Application_Model_DbTable_Commune(); $result = $commune->getCommunesParDebutNom($debut); $this->_helper->json(array_values($result));
Je n'ai plus l'erreur et Firebug affiche bien les données Json récupérées lors de la saisie des caractères dans la zone... mais celle-ci n'affiche pas la liste ! :(

EDIT :
Les données avec accents par contre sont mal encodées. Exemple pour la commune "L'Abergement-Clémenciat" :

Citation:

{"0":"","14575":"L'Abergement-Cl\u00e9menciat",

J'ai vu quelque part qu'il fallait utiliser Zend_Json_Encode ou un truc dans le genre mais je n'ai pas trouver de quelle manière il faut l'utiliser (paramètres, mode d'utilisation...)
FIN EDIT

J'ai essayé de créer dans le modèle Commune la même fonction search que dans la vidéo mais Eclipse affiche des erreurs :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 public static function search($term) { $filter = function($commune) use ($term) { if(stristr($city, $term)) { return true; } return false; } return array_filter(self::$communes, $filter); }
Eclipse n'accepte pas function et use du $filter :

Citation:

syntax error, unexpected function et unexpected use

27/01/2011, 07h32
manuscle
Je suis désolé car mon niveau de connaissance en Jquery est nul, j'en ai jamais fait! :oops: Je ne connais que Dojo et Mootools!

Par contre à regarder la doc ZF Zend_Json::encode() à l'air assez simple, c'est une méthode statique donc en faisant simplement dans ton action:
Code:

1 2 3 echo Zend_Json::encode(array_values($result)); exit;
ça fait la même chose ou c mieux?
Sinon pour eclipse, as-tu vérifié qu'il prenait en charge php 5.3?

J'ai essayé rapidement mais comme j'ai essayé d'autres trucs depuis, je ne sais plus trop quels résultats exacts j'ai eu mais je crois que ce n'était pas mieux.

Bref...

Je pense avoir encore un peu progressé.
L'erreur que j'avais m'a mis la puce à l'oreille :

Citation:

Action Helper by name AutoComplete not found.

J'ai légèrement modifié le code de ma fonction recherchecommunesAction en ajoutant ->view dans la ligne censée lancer le helper autoComplete :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 public function recherchecommunesAction() { $request = $this->getRequest(); $debut = $request->getParam('term'); $commune = new Application_Model_DbTable_Commune(); $result = $commune->getCommunesParDebutNom($debut); $listecommunes = array(); $listecommunes[0] = ''; foreach($result as $cmn) { $listecommunes[$cmn['cmn_id']] = $cmn['cmn_nom']; } //$this->view->addHelperPath('/ZendX/JQuery/View/Helper/', 'ZendX_JQuery_View_Helper'); $listecommunes = Zend_Json::encode(array_values($listecommunes)); //$this->_helper->json($listecommunes); $this->view->_helper->autoComplete($listecommunes); //$this->view->form->id_commune_etablissement->setJQueryParams(array('source' => $listecommunes)); }
Les lignes commentées montrent que j'ai essayé plusieurs trucs sans succès ! :?
Mainternant, je n'ai plus l'erreur citée ci-dessus mais j'en ai une autre :

Citation:

Call to a member function autoComplete() on a non-object in /var/www/html/stagmas/application/controllers/AccueiletudiantController.php on line 232 

Effectivement, $listecommunes est un array.
J'ai essayé d'y ajouter ta formule avec Zend_Json::encode mais c'est pareil.

EDIT : Nouveau progrès !
J'ai vu ce qui suit dans la doc :

Citation:

Using an Action Helper to Send Data to AutoComplete

The jQuery UI Autocomplete Widget can load data from a remote location rather than from an javascript array, making its usage really useful. Zend Framework currently providers a bunch of server-side AutoComplete Helpers and there is one for jQuery too. You register the helper to the controller helper broker and it takes care of disabling layouts and renders an array of data correctly to be read by the AutoComplete field. To use the Action Helper you have to put this rather long statement into your bootstrap or Controller initialization function:

Zend_Controller_Action_HelperBroker::addHelper(
new ZendX_JQuery_Controller_Action_Helper_AutoComplete()
);

You can then directly call the helper to render AutoComplete Output in your Controller

class MyIndexController extends Zend_Controller_Action
{
public function autocompleteAction()
{
// The data sent via the ajax call is inside $_GET['q']
$filter = $_GET['q'];
// Disable Layout and stuff, just displaying AutoComplete Information.
$this->_helper->autoComplete(array("New York", "Bonn", "Tokio"));
}
}

Et j'ai ajouté la première partie à mon code, dans la fonction _init du contrôleur :
Code:

1 2 3 4 // Ajout du helper d'action JQuery autoComplete Zend_Controller_Action_HelperBroker::addHelper( new ZendX_JQuery_Controller_Action_Helper_AutoComplete() );
Ensuite, dans la fonction recherchecommunes, je suis revenu au simple :

Code:

$this->_helper->AutoComplete($listecommunes);

Dans Firebug, j'ai cette fois une belle liste de communes correctement orthographiées et adaptée à chaque lettre saisie dans la zone mais cette liste d'auto-complétion ne s'affiche pas dans le formulaire.

Il manque encore un truc !

J'ai fini par y arriver. Bizarrement, c'est une ligne de code que j'avais commentée qui était la bonne !

Bref, voici le code qui fonctionne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 public function recherchecommunesAction() { $request = $this->getRequest(); $debut = $request->getParam('term'); $commune = new Application_Model_DbTable_Commune(); $result = $commune->getCommunesParDebutNom($debut); $listecommunes = array(); //$listecommunes[0] = ''; foreach($result as $cmn) { $listecommunes[$cmn['cmn_id']] = $cmn['cmn_nom']; } $this->_helper->json(array_values($listecommunes)); }
Avec les 36682 communes françaises, le temps d'affichage des communes possibles quand l'utilisateur saisit une lettre au clavier est inférieur à la demi-seconde. Ce n'est pas encore génial mais je m'en contenterai pour le moment.

Par ailleurs, j'ai carrément ouvert un bug sur cet autre problème détecté cette semaine, toujours avec l'autocompletion en JQuery.

25/06/2011, 01h58
plage

Je veux realiser le meme exemple mais j'y arrive pas .des que j'ajoute la fonction suivante dans le bootstrap plus rien ne s'affiche .

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);
}

Pourais tu m'envoyer ton code source stp.