Bonjour,

Voilà j'ai un problème avec l'utilisation du plugin jquery autocomplete avec cakephp. Je souhaite lorsque l'utilisateur entre des informations sur un input text, l'autocomplétion lui propose le code postal et la ville. Exemple : 83000 Toulon . Le code postal et la ville sont dans une table de ma base de donnée.

J'arrive à afficher soit le code postal, soit les villes avec la fonction find('list'), mais si je fais un find('all') ou un find('list') avec plusieurs fields il m'affiche pas correctement les données. Je pense qu'il faut juste que j'arrive à décoder le json Object de ma vue index.json. Bref voila un aperçut de mon code :

Vue index.ctp :

<?php
  //let's load jquery libs from google
  $this->Html->script('https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', array('inline' => false));
  $this->Html->script('https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', array('inline' => false));

  //load file for this view to work on 'autocomplete' field
  $this->Html->script('signup', array('inline' => false));

  //form with autocomplete class field
  echo $this->Form->create();
  echo $this->Form->input('CP', array('class' => 'ui-autocomplete',
               'id' => 'autocomplete'));
  echo $this->Form->end();

  ?>

  <script type="text/javascript">

  $('#autocomplete').autocomplete({
    source: 'http://localhost/plateforme_candidature/villes/index.json',
    minLength: 3,
    autoFocus: true,
  });

</script>

Mon Controller :

public function index() {

        if ($this->request->is('ajax')) {
        $term = $this->request->query('term');

         $villes = $this->Ville->find('list', array(
        'conditions'=>array('Ville.CP LIKE'=>'%'.$term.'%'),
          'limit'=>7
        ));

        $this->set(compact('villes'));
        $this->set('_serialize', 'villes');
      }
  }

Je pense que je suis pas loin.
J'ai tester avec une fonction ajax qui affiche la ville et le code postal mais l'autocomplétion ne marche plus, il me récupère juste les 7 premiers résultats de ma base de données.

Voici le script :

$('#autocomplete').autocomplete({
    autoFocus:true,
    minLength:3,
    source : function(requete, reponse){ // les deux arguments représentent les données nécessaires au plugin

    $.ajax({

            url : 'http://localhost/plateforme_candidature/villes/index.json', // on appelle le script JSON
            dataType : 'json', // on spécifie bien que le type de données est en JSON

            data : {

                name_startsWith : $('#autocomplete').val(), // on donne la chaîne de caractère tapée dans le champ de recherche

                maxRows : 6

            },

           success : function(donnee){

                reponse($.map(donnee, function(objet){

                    return objet.Ville.CP + ' ' + objet.Ville.VILLE;

                }));

            }
        });

    }

});

  </script>

Merci de votre aide si vous avez réussi a me décrypter ^^

2 réponses


public function index() {

        if ($this->request->is('ajax')) {
        $term = '%'.$this->request->query('term').'%';

        $conditions = array('OR' => array(
            array('Ville.CP LIKE' => $term),
            array('Ville.VILLE LIKE' => $term)
        ));

         $villes = $this->Ville->find('all', array(
            'fields'=>array('Ville.id','Ville.CP','Ville.VILLE'),
            'conditions'=>$conditions,
            'limit' => 7
        ));
        $data = [];
        foreach ($villes as $ville) {
            $data[] = array(
                'id'=>$ville['Ville']['id'],
                'value'=>$ville['Ville']['CP'].' - '.$ville['Ville']['VILLE']
            );
        }

        $this->set(compact('villes'));
        $this->set('_serialize', 'villes');
      }
}

Merci amethyste !