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