Salut à tous.
suis débutant en jquery, et je suis entrain de coder un projet avec le framework cakephp 2.6.
dans mon ptojet j'ai voulu mettre sur pied un formulaire de recherche rapide qui permet de filtrer les informations dans une base de données en fonction des caractères saisie.ayant fait des recherche je suis tombé sur ce cours

qui explique comment faire de l'autocomplete seulement je suis bloqué parceque je n'arrive pas à afficer les informations dans mon selecteur voici ce que j'ai dans mon fichier JS

$(function()

{

  $(document).ready(function()

      {

           $('#idinforecherche').autocomplete(

             {             

                            //var resultatreq = $.map(resultatreq, function (value, key) { return { value: value, data: key }; });
                            serviceUrl:'listPerseonnel',
                            paramName:'query',
                           dataType:'json'

              }
         );

      }

    );
}

  );

dans mon fichier php j'ai ceci :

public function listPerseonnel($query = null)
    {

        if($this->request->is('ajax','get'))
        {
                    $this->loadModel('Personnel');
                    $responseenter = $this->request->query['query'];
                    $results = $this->Personnel->find('all',array(
                    'fields' => array('DISTINCT Personnel.id','nom_personnel','prenom_personnel','pseudo'),
                    'conditions' => array('Personnel.enseignements_id' => $this->Auth->user('enseignements_id'),
                    'Fonctionpersonnel.poste' => 'Enseignant',
                    'OR' => array(

                                        array("nom_personnel LIKE" => "%" . $responseenter . "%"),
                                        array("prenom_personnel LIKE" => "%" . $responseenter . "%"),
                                        array("pseudo LIKE" => "%" . $responseenter . "%")

                                )
                    ),
                    'recursive' => 0,
                    'order' => array('Personnel.created DESC')

                    ));
                if(empty($results))
                {
                    $this->Session->setFlash('Veuillez selectionnez un element valide','default',array('class'=>'alert alert-info'));
                }
                else
                {
                    //$return = array('resultatreq' => $results = current($results));
                    $results = current($results);
                    die(json_encode($results));
                    exit();

                }

        }

    }

et enfin mon html ou ma vew j'ai ceci:


 <div class="thumbnail">
                                       <div id="idsolution">
                                        <input type="text" id="idinforecherche" />
                                       </div>
                                       <div id="idsolution"></div>

                                        </div>
```l

Lorsque je saisis un caractère par exemple y, le filtrage se passe sans problèque car dans mon firebug j'ai bien le résultat envoyé par mon serveur soit : 
{"Personnel":{"id":"73","nom_personnel":"KEMAYOU","prenom_personnel":"Cyrile","pseudo":"kemayou"}}
mon sousci est que je n'arrive pas à remplir mon div  ayant pour id:#idsolution avec les infos envoyé par mon serveur. pardon quelqu'un à une idée? je galère depuis pardon

3 réponses


Bonjour,

L'autocomplétion a pour but de fournir une aide à la saisie, pas de remplir une autre div avec les résultats de la recherche.

Quel est le code Js qui traite de la soumission de ton formulaire?

Dans l'attente de ta réponse

cordialement

Antho

Salut,

Je te faut parser, puis afficher les infos récupérées. D'après ce que je vois tu utilises la fonctinon autocomplete() de jQueryUI, donc il te faut utiliser le callback "response" (http://api.jqueryui.com/autocomplete/#event-response):

$('#idinforecherche').autocomplete({             
  serviceUrl: 'listPerseonnel',
  paramName: 'query',
  dataType: 'json',
  response: function( event, ui ) {
     // Infos dans la variable 'ui'
  }
});

La réponse JSON se trouve dans la variable UI de la fonction 'response', il faut donc que tu regarde ce qu'il contient afin d'en extraire les infos dont tu as besoin. Une fois que tu as la réponse, tu fais une boucle avec la fonction JS forEach() afin de générer le HTML que tu injectes dans un élément du DOM via la fonction jQuery prepend() par exemple.

romses
Auteur

Merci pour ta précision betaWeb,
en effet , ce que moi je veus faire c'est d'affiché le formulaire de recherche rapide, une fois que lon saisit caractère par caractère, que les propositions apparaissent plutot dans un div et non dans l'input de la recherche. j'ai affiché dans le premier post le JS qui traitait la soumission. je ne sais pas si vous m'avez compris.

merci encor pour vos suggestions