Discussion :

[serna]

bonjour,

j'utilise un script jquery d'autocompletion qui récupère dans un champ imput de mon formulaire la valeur des colonnes villes / départements dans la table mysql

ça fonctionne bien mais j'aimerais récupérer également dans un champ hidden la valeur de la colonne id_ville de cette meme table

comment puis je procéder ?

la page du formulaire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form id="form4" accept-charset="UTF-8" action="insertion.php"   method="post" >
	<label>Ville de Départ :</label><input  name='villedepart' type='text'  id='depart' value='' >
 
 <script type="text/javascript">
$(function() {
	$("#depart").autocomplete({
		source: "traitement.php",
		minLength: 2
	});				
});
</script>
  <input type="hidden" id="id_ville" name="id_ville" value="" />
<input name="submit" type="submit"  value="Envoyez"  />
 
</form>

et la page traitement.php qui retourne les valeurs de la table pour remplir l'input

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php 
if (isset($_GET['term'])){
 
	try {
 
	    $stmt = $connection->prepare('SELECT id_ville,villes,departement FROM communes WHERE villes LIKE :term LIMIT 10'  );
	    $stmt->execute(array('term' => '%'.$_GET['term'].'%'));
 
	    while($row = $stmt->fetch()) {
	        $return_arr[] =  $row['villes']." / ".$row['departement'];
			 			 	    }
 
	} catch(PDOException $e) {
	    echo 'ERROR: ' . $e->getMessage();
	}
 
    echo json_encode($return_arr);
	}
?>

merci pour votre aide

[Kaamo]

Pour te mettre sur la voie :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$(function() {
  $("#depart").autocomplete({
    source: "traitement.php",
    minLength: 2,
    select : function( event, ui ){
      // ici
    }
  }
});

[serna]

merci pour ta réponse Kaamo

peux t'on après le traitement de la requête php , envoyez plusieurs variables par json_encode ( et récupérer dans la page du formulaire ,en plus du traitement de l'autocomplete , la valeur de la variable $id_ville pour l'inclure dans le champ hidden "#id_ville" ?

bref , pourrais tu me mettre un peu plus sur la voie , c'est le brouillard pour moi

[SpaceFrog]

y'a pas un event oncomplete ou onselect sur ce plugin ?

si c'est le cas rajoute un input hidden et modifies en le value sur cet event ...

[serna]

voila j'ai suivie la piste de kaamo

j'ai modifié le script autocomplete ainsi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
$(function() {
  $("#depart").autocomplete({
    source: "traitement.php",
    minLength: 2,
   select: function(event, ui) {
                    $('#id_ville').val(ui.item.id_ville);
                }  
 
				});	
});
</script>

mais ça ne doit pas remplir le champ de type hiden qui a comme name "id_ville"
car ça m'envoie bien la ville et le département mais pas l'id_ville

[Kaamo]

SpaceFrog : oui, c'est à mettre dans la fonction "select" prévue pour ça. C'est déclenché quand l'utilisateur choisit une donnée de la liste renvoyée.

serna : C'est normal, en PHP tu sembles renvoyer les données sous forme de <ville> / <departement>. Si tu ne ramènes pas l'id de la ville aussi ...

[serna]

je récupère effectivement les données sous forme de <ville> / <departement>
car c'est comme ça que je veux qu'elle s'affichent dans le select et je ne sait pas comment envoyé en plus , id_ville via json_encode en plus de ces deux données sans que ça ne s'affiche dans le select

voila ma page php avec en plus la variable pour l'id_ville, mais comment l'envoyer par json_encode ?

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php 
if (isset($_GET['term'])){
 
	try {
 
	    $stmt = $connection->prepare('SELECT id_ville,villes,departement FROM communes WHERE villes LIKE :term LIMIT 10'  );
	    $stmt->execute(array('term' => '%'.$_GET['term'].'%'));
 
	    while($row = $stmt->fetch()) {
	        $return_arr[] =  $row['villes']." / ".$row['departement'];
                $return_id =  $row['id_ville'];
			 			 	    }
 
	} catch(PDOException $e) {
	    echo 'ERROR: ' . $e->getMessage();
	}
 
    echo json_encode($return_arr);
	}
?>

[Kaamo]

Il faut ruser un peu
Soit tu enrichies le tableau renvoyé via json_encode.
Soit tu sépares une nouvelle fois les données à l'aide de "/".

La première option semble la plus propre, cela évite d'avoir à "splitter" le résultat. Quelque chose dans le genre donc :

En PHP, tu retournes l'ensemble des données de la requête. Attention, dans la requête, il faut un champ "label", donc renomme, par exemple, le champ "villes" => "label"

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$stmt = $connection->prepare('SELECT villes as label, departement, id_ville FROM communes WHERE villes LIKE :term LIMIT 10'  );
// .... le reste ....
while ( .... ) 
  $return_arr[] =  $row; 
 
// $return_arr après la boucle a donc une structure de ce style : [["label" => "Ville1", "departement" => "00001", "id_ville": "1"], ["label" => "Ville2", "departement" => "00002", "id_ville": "1"], ...]
 
echo json_encode($return_arr); // Ce qui donne en Javascript un JSON de ce type : [ 
  {"label": "Ville1", "departement": "00001", "id_ville": "id1"},
  {"label": "Ville2", "departement": "00002", "id_ville": "id2"}, 
  ....
]

Donc, tu n'as plus qu'à donner la méthode de traitement à ton autocomplete
pour qu'il puisse digérer la soupe que tu lui renvoies (comme ce n'est plus une simple chaine de caractère basique)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function() {
  $("#depart").autocomplete({
    source: "traitement.php",
    minLength: 2,
    select : function( event, ui ){
      $( "#depart" ).val(ui.item.label + " / " + ui.item.departement); // dans le champ visible
      $('#id_ville').val(ui.item.id_ville); // dans le champ caché
      return false;
    } /* Le coté un peu technique dans ce cas, il faut redéfinir la liste affichée par l'autocomplete en surchargeant "_renderItem" */
  }).data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
      .data( "item.autocomplete", item )
      .append( "<a>" + item.label + " / " + item.departement + "</a>" )
      .appendTo( ul );
  };
});

EDIT : correction de la requête, il faut qu'il y ait un champ nommé "label" pour que l'auto-complete fonctionne. Le Fiddle qui va avec

[serna]

un grand merci Kaamo. le script fonctionne parfaitement.

je suis vraiment épaté par l’ingéniosité de ta solution.

et encore merci d'avoir documenté ton script et de l'avoir mis sur fiddle.