Remplir des champs suite à une autocomplétion

Version imprimable

Bonjour,

Je suis en train de réaliser mon premier formulaire PHP. Il s'agit d'un formulaire permettant à des propriétaires d'enregistrer les dates d'occupations de leurs logements : demo

Dans ce formulaire, j'ai réalisé une autocompletion sur le premier champs "logement" permettant de récupérer les logements insérés précédemment en base de données. Pour cela, j'ai utilisé le widget jquery.

La prochaine étape consiste à récupérer les données du logement sélectionné dans le champ de l'autocompletion et de les ajouter dans les champs correspondants (adresse, cp, ville, propriétaire...). Mais je colle sur ce point...

J'ai vue qu'il existait une option "select" sur la fonction "autocomplete" permettant d'exécuter une action à la sélection :
Code:

1 2 3 4 5 6 7 8 //Autocompletion logement $('#logement').autocomplete({ source : 'liste.php', autoFocus: true, select : function( event, ui ){ $( "#adresse" ).val( ui.item.value ); } });
Code de "liste.php" :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <?php include ('config.inc.php'); try { $bdd = new PDO($hote, $user, $password); } catch (Exception $e){ die('Erreur : ' . $e->getMessage()); } $term = $_GET['term']; $requete = $bdd->prepare('SELECT * FROM logement WHERE nom LIKE :term'); // j'effectue ma requête SQL grâce au mot-clé LIKE $requete->execute(array('term' => '%'.$term.'%')); //STOCKAGE DES DONNEES $array = array(); // on créé le tableau while($donnee = $requete->fetch()) // on effectue une boucle pour obtenir les données{ array_push($array, $donnee['nom']); // et on ajoute celles-ci à notre tableau } echo json_encode($array); // il n'y a plus qu'à convertir en JSON ?>
Le soucis c'est que je ne sais pas comment faire le lien entre mon fichier JSON "liste.php" regroupant le nom de tous mes logements avec la fonction que j'applique sur le select.

Quelqu'un pourrait m'aider afin d'avancer sur ce point ?

Merci

Après avoir lu la documentation de l'Autocomplete jQuery il semblerait que ça ne soit pas possible de le réaliser directement avec ta source. En effet elle doit obligatoirement être de forme:

- Tableau de string [ "valeur1", "valeur2", "..." ]
- Tableau d'objet [ { label: "label1", value: "valeur1" }, { label: "label2", value: "valeur2" }, { label: "...", value: "..." } ]
Et tu ne peux donc pas étendre le tableau d'objet avec plus de clé qu'il n'en faut.

Tu as deux options soit tu utilises une autre solution que jQuery Autocomplete comme Bootstrap Typeahead ou alors tu récupères en JS un tableau d'objet te permettant de récupérer l'ensemble des valeurs associées après comparaison des values
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 //Récupération des données via AJAX ou au chargement de la page (si page PHP) var MyList; //Autocompletion logement $('#logement').autocomplete({ source : 'liste.php', autoFocus: true, select : function( event, ui ){ $( "#adresse" ).val( ui.item.value ); for( var a in MyList ) { if( MyList[a].value === ui.item.value ) { $( '#codepostal' ).val( MyList[a].codepostal ) $( '#ville' ).val( MyList[a].ville ) $( '#proprietaire' ).val( MyList[a].proprietaire ) } } } });
une petite astuce consisterais a nommer tes clés et tes champs de la même manière (si tu en as plein c'est appréciable ;)) :
Code:

1 2 3 4 5 6 7 8 for( var a in MyList ) { if( MyList[a].value === ui.item.value ) { $.each( MyList[a], function( key, val ) { $( '#'+key ).val( val ) } ); } }

24/02/2014, 14h19
danielhagnoul

Citation:

Envoyé par Darkaurora

Après avoir lu la documentation de l'Autocomplete jQuery il semblerait que ça ne soit pas possible de le réaliser directement avec ta source. En effet elle doit obligatoirement être de forme:

- Tableau de string [ "valeur1", "valeur2", "..." ]
- Tableau d'objet [ { label: "label1", value: "valeur1" }, { label: "label2", value: "valeur2" }, { label: "...", value: "..." } ]
Et tu ne peux donc pas étendre le tableau d'objet avec plus de clé qu'il n'en faut.

Bonjour

Il doit y avoir au minimum les propriétés "label" et "value". Mais il peut y en avoir d'autres, voir le code source de cette démonstration.

Autant pour moi, donc pour répondre plus correctement a Jibego, il te suffiras de passer plus d'informations que le simple $donnee['nom'] de ton script php et tu n'auras qu'a faire:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 //Autocompletion logement $('#logement').autocomplete({ source : 'liste.php', autoFocus: true, select : function( event, ui ){ $( "#adresse" ).val( ui.item.value ); $( '#codepostal' ).val( ui.item.codepostal ) $( '#ville' ).val( ui.item.ville) $( '#proprietaire' ).val( ui.item.proprietaire ) } });
C'est bon cette fois ci Daniel ? :P

24/02/2014, 23h00
danielhagnoul

Citation:

Envoyé par Darkaurora

C'est bon cette fois ci Daniel ? :P

Bonsoir

Je suppose que oui, je n'ai pas assez de temps libre pour tester toutes les questions et les réponses.
26/02/2014, 21h18
Jibego

Merci pour vos réponses.

Du coup, il faut que j'ajoute les autres données de ma table "logement" dans le tableau json de "liste.php" ou alors je créé une nouvelle variable dans mon code "script.js" où j'associe les données du logement sélectionné avec une nouvelle requète ?
26/02/2014, 22h21
Darkaurora

Oui tu as juste a ajouter les données dans ton tableau JSON et ça sera tout bon

Bonjour à tous,

Merci pour votre aide, j'ai pu réussir à faire ce que je voulais.
Maintenant, lorsque l'on sélectionne un logement par l'autocompletion dans le champ "logement", les infos associées dans la BDD s'ajoutent dans les autres champs.

Vous pouvez essayer directement sur cette page : http://www.jibego.com/rrps/reservation.php
Essayez en tapant "r" dans le champs "logement" et sélectionnez le logement "résidence test 36".

J'ai encore quelques bug à régler mais j'arrive au bout !

Concernant le code, voici le js de l'autocompletion du fichier "script.js" :

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
26
27
28
$(function() {
 
	//Autocompletion logement
	$('#logement').autocomplete({
		source : 'liste.php',
		autoFocus: true,
		select : function( event, ui ){
    		$( "#adresse" ).val( ui.item.adresse);
			$( '#npa' ).val( ui.item.npa );
			$( '#ville' ).val( ui.item.ville);
			$( '#nom' ).val( ui.item.nom );
			$( '#prenom' ).val( ui.item.prenom );
			$( '#email' ).val( ui.item.email );
		}
	});
 
 
 
	//Calendrier
	$.datepicker.setDefaults( $.datepicker.regional['fr'] );
	var datepickers = $('.date').datepicker({
		dateFormat: "yy-mm-dd",
		onSelect: function(date){
			var option = this.id == 'arrivee' ? 'minDate' : 'maxDate';
			datepickers.not('#'+this.id).datepicker('option',option,date);
		}
	})
});

Et le code pour obtenir le tableau JSON dans le fichier "liste.php" :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?php
include ('config.inc.php');
try {
    $bdd = new PDO($hote, $user, $password);
}
catch (Exception $e)
{
    die('Erreur : ' . $e->getMessage());
}
 
$term = $_GET['term'];
 
$requete = $bdd->prepare('SELECT * FROM logement WHERE nom LIKE :term'); // j'effectue ma requête SQL grâce au mot-clé LIKE
$requete->execute(array('term' => '%'.$term.'%'));
 
$requete2 = $bdd->prepare('SELECT * FROM occupant WHERE proprietaire =\'1\' AND logement LIKE :term'); // j'effectue ma requête SQL grâce au mot-clé LIKE
$requete2->execute(array('term' => '%'.$term.'%'));
 
//STOCKAGE DES DONNEES
$return_arr = array(); // on créé le tableau
 
while($donnee = $requete->fetch()) // on effectue une boucle pour obtenir les données
{
	$row_array['value'] = $donnee['nom'];
    $row_array['adresse'] = $donnee['adresse'];
    $row_array['npa'] = $donnee['npa'];
    $row_array['ville'] = $donnee['ville'];
 
    array_push($return_arr,$row_array);
}
 
while($donnee2 = $requete2->fetch()) // on effectue une boucle pour obtenir les données
{
	$row_array['proprietaire'] = $donnee2['proprietaire'];
    $row_array['nom'] = $donnee2['nom'];
    $row_array['prenom'] = $donnee2['prenom'];
    $row_array['email'] = $donnee2['email'];
 
    array_push($return_arr,$row_array);
}
 
echo json_encode($return_arr); // il n'y a plus qu'à convertir en JSON
 
 
?>

Si vous voyez des erreurs, merci de me le souligner.

Bonn journée,