Discussion :

[Jibego]

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 :

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

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 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
<?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

[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.

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 :

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
 
//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 :

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

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 )
		} );
	}
}

[danielhagnoul]

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.

[Darkaurora]

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 :

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

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 ?

[danielhagnoul]

C'est bon cette fois ci Daniel ?

Bonsoir

Je suppose que oui, je n'ai pas assez de temps libre pour tester toutes les questions et les réponses.

[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 ?

[Darkaurora]

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

[Jibego]

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 :

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
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 :

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
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,