Separer résultat autocomplete

Résolu/Fermé
gismin - 8 févr. 2021 à 10:40
 gismin - 9 févr. 2021 à 16:18
Bonjour,
Dans mon code ci-dessous j'obtiens avec jquery autocompllete une ville et son code postal :
$(function(){
$('#codep').autocomplete({
minLength: 2,
source : 'completion.php'
});
$('#codep').val();
});

Je voudrais séparer du résultat la ville et l'afficher dans un input id="ville".
Comment dois je faire ?
Merci de vos réponses.

8 réponses

jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
Modifié le 8 févr. 2021 à 11:27
BOnjour,

Déjà, lorsque tu postes du code sur le forum, merci d'utiliser les balises de code
Explications (à lire entièrement !! ) disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite, il faut que tu utilises la méthode "select"
$('#codep').autocomplete({
  minLength: 2,
  source : 'completion.php' ,
  select: function( event, ui ) {  
         $('tonchamp1').val( ui.item.label ); //
         $("tonchamp2").val( ui.item.value ); //
        return false;
  }
});


0
Utilisateur anonyme
8 févr. 2021 à 11:27
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717 > Utilisateur anonyme
8 févr. 2021 à 11:29
j'ai été plus rapide que toi de quelques milli secondes... :-)
0
Pardon mais je comprends rien.
J'ai 2 input text id"codepl" et id"ville".
Avec "autocomplete" (ci-dessous) vers mon fichier "completion.php" j'ai en retour quand je rentre un code postal des 'villes+ code postal' qui s'affichent das mon input "codep" puis je clique sur une proposition et cela s'affiche donc dans cet input.
Ce que je cherche à faire c de séparer la ville et de l'afficher aussi dans mon input id="ville".
 $(function(){   
$('#codep').autocomplete({    
  minLength: 2,
    source : 'completion.php' 
});                                              
 $('#codep').val();   
  
});	   
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717 > gismin
8 févr. 2021 à 13:15
Je t'ai donne le code qui va bien côté js
Faudrait, par contre nous montrer le code php de ton fichier completion.php'
La réponse devant contenir un champ "label" et un champ"value"
0
Ca marche pas.
 $(function(){    
$('#codep').autocomplete({    
  minLength: 2,
    source : 'completion.php' 
});                                              
 select: function( event, ui ) {  
         $('codep').val( ui.item.label ); //
         $("ville").val( ui.item.value ); //
        return false;
});


Mon fichier PHP lui marche puisque je reçois la demande et l'affiche dans mon input codep.

$requete = $bdd->prepare('SELECT codep, ville_nom FROM villes_france_free WHERE codep LIKE :term ORDER BY ville_nom'); // j'effectue ma requête SQL grâce au mot-clé LIKE
 
$requete->execute(array('term' => $term.'%')); 
 
$array = array(); // on créé le tableau 
 
while($donnee = $requete->fetch()) // on effectue une boucle pour obtenir les données 
{ 
    array_push  ($array,($donnee['ville_nom']).'  '.($donnee['codep']))   ;// et on ajoute celles-ci à notre tableau
 }
 
 
echo json_encode($array); // il n'y a plus qu'à convertir en JSON 
  
 }  
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
Modifié le 8 févr. 2021 à 14:34
while($donnee = $requete->fetch()) // on effectue une boucle pour obtenir les données 
{ 
$array[] = array('label'=>$donnee['ville_nom'] , 'value'=>$donnee['codep']); 
 }
 
 
echo json_encode($array); // il n'y a plus qu'à convertir en JSON 
 
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717 > jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024
8 févr. 2021 à 14:45
ah, et il ne faut pas oublier de bien spécifier tes champs dans le JS ....
Tu utilises leur ID ? dans ce cas il faut préfixer par un dièse
Ou un class ? dans ce cas là, il faut préfixer par un point

Si id :
  $('#codep').val( ui.item.label ); //
   $("#ville").val( ui.item.value ); //
0
C toujours pas concluant avec:
$('#codep').autocomplete({
  minLength: 2,
  source : 'completion.php' ,
  
    select: function( event, ui ) {  
         $('#codep').val( ui.item.value );  
         $("#ville").val( ui.item.label );
        return false;
    }
});
et


while($donnee = $requete->fetch()) 
{ 
 $array[] = array('label'=>$donnee['ville_nom'] , 'value'=>$donnee['codep']);  
 
 
echo json_encode($array); // il n'y a plus qu'à convertir en JSON 
  
 }  


Je ne crois qu'il y ait des erreurs de syntaxes
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
8 févr. 2021 à 17:31
Où as tu vu que le json_encode devait se trouver dans la boucle ?

Exemple
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    .<meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete </title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  </head>

  <body>
  
  <input  type="text" id="codep">
  <input  type="text" id="ville">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $('#codep').autocomplete({    
      minLength: 2,
      source : 'completion.php' ,                                  
      select: function( event, ui ) {  
               $('#codep').val( ui.item.label ); //
               $("#ville").val( ui.item.value ); //
              return false;
            }
    });
  </script>
  </body>
</html>

et le fichier php (juste pour exemple )
<?php

//exemple

$res = array();

$res[] = array("value"=>10000,"label"=>"v1");
$res[] = array("value"=>10000,"label"=>"v3");
$res[] = array("value"=>10000,"label"=>"v2");

echo json_encode($res);
exit;
0
oui j'ai fait une erreur de transcription mais chez moi 'json_encode ' est après la boucle (plus haut j'ai posté correctement).

Mon fichier PHP marche puisqu'il me renvoie: ville et code postal et avec mon autocomplete original j'ai bien ces 2 valeurs qui s'inscrivent dans mon input "codep" quand j'en choisis et clique.
Comment reprendre "simplement" ces 2 valeurs et en afficher la ville dans l'input 'ville' ?
Ton code autocomplete semble logique mais je ne sais pourquoi il ne marche pas.
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
8 févr. 2021 à 18:33
Il fonctionne parfaitement...
As tu pris le temps, au moins de le tester ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
peux tu me donner ton fichier completion.php complet ?
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
8 févr. 2021 à 19:09
Ben c'est juste le code PHP que je t'ai donné
0
Bon, ça marche ! j'ai repris ton code HTML en entier alors qu'avant qu'en partie seulement et avec dans complete.php :
while($donnee = $requete->fetch()) // on effectue une boucle pour obtenir les données 
{ 
     $array[] = array('label'=>$donnee['ville_nom'] , 'value'=>$donnee['codep']);   
 }
.

Pour ta 2eme variante PHP j'ai pas encore bien saisie pour l'insérer à la suite de ma requête MYSQL.

En tout cas merci beaucoup et de partager tes compétences.
0
Bonjour, je reviens sur le code autocomplete.
Le code de Jordan45 n'affiche que les codes postaux dans codep sans les villes correspondantes. Après divers essais c mieux avec les codes suivants:
 
$('#codep').autocomplete({    
      minLength: 2,
      source : 'completion2.php' ,                                  
      select: function( event, ui ) {  
                $('#codep').val(); 
               $("#ville").val( ui.item.value); //
              return false;
			  }
});		

 include ('connect.php');
 
  if(isset($_GET['term'])) { 
 $term = htmlspecialchars($_GET['term']); 
  
$requete = $bdd->prepare('SELECT codep, ville_nom FROM villes_france_free WHERE codep LIKE :term ORDER BY ville_nom'); // j'effectue ma requête SQL grâce au mot-clé LIKE
 
$requete->execute(array('term' => $term.'%')); 
 
$array = array(); // on créé le tableau 
 
while($donnee = $requete->fetch()) // on effectue une boucle pour obtenir les données 
{ 
 $array[] = array('value'=>$donnee['ville_nom'] , 'label'=>$donnee['codep']);    // et on ajoute celles-ci à notre tableau
 }
  
echo json_encode($array); // il n'y a plus qu'à convertir en JSON 
  
 }  


Le seul petit problème (même si c pas trop génant) c qu'il affiche dans '#ville' le code postal à la suite de la ville . Je ne sais pas ce qu'il faut mettre comme valeur dans "$("#ville").val( ui.item.value);" pour n'afficher que la ville. J'ai essayé au pif avec $array[0] sans résultat.
0
Enfin j'ai trouvé sur un forum "openClassroom" la solution:
 $('#codep').autocomplete({    
      minLength: 2,
      source : 'completion.php' ,                                  
      select: function( event, ui ) {  
	           let valeurs = ui.item.value.split(' - ');
                $('#codep').val( valeurs[1] );
                $('#ville').val( valeurs[0] ); 
	   return false;
	  }
    });

Problème résolu.
0