[RESOLU] Formulaire autocomplétion (+ json ? + jquery ?)

12 févr. 2017, 16:09

Bonjour à tous,

J'aimerais proposer un formulaire avec autocomplétion, qui fonctionnerait comme ceci :

- Champs à remplir : Société, nom, prénom, adresse1, adresse2, code postal, ville, pays
- Une table dans ma base garde les adresses à proposer
- Lorsqu'un utilisateur arrive sur la page, les adresses de son carnet sont stockées (en json ? où ça ? sur la page ? dans un fichier externe ?)
- Le formulaire propose en autocomplétion à partir de la société ou du nom de famille, et remplit automatiquement tous les champs lorsqu'on sélectionne

J'ai pour le moment un truc qui fonctionne pas terrible avec une requête ajax, mais c'est un peu lourdingue, j'aimerais faire mieux. J'ai cherché pas mal à droite à gauche, mais n'ai rien trouvé de concluant : quelqu'un a-t-il des liens intéressants ? Des pistes ?

Merci pour votre aide.

12 févr. 2017, 16:42

Bonjour,

Il y a un super tuto qui a été fait à ce sujet sur openclassrooms :
https://openclassrooms.com/courses/deco ... mpletion-1

12 févr. 2017, 16:48

Merci @rthur, je l'avais vu mais avais été un peu découragé par le pavé... Bon, je m'y colle

12 févr. 2017, 18:03

Après tu peux aussi directement partir des exemples de jquery où la source est donnée ici :
https://jqueryui.com/autocomplete/

13 févr. 2017, 11:27

Aaaah oui ! Voilà qui me parle beaucoup plus (comme quoi souvent, un bon exemple vaut mieux que etc.).
Toutefois, le problème de la bibliothèque UI c'est que c'est prêt à consommer et que ça ne correspond pas exactement à ce que je veux faire.
Je vais voir ce que je peux en faire !

Edit : j'ai trouvé ça, ça peut ptêt servir : https://laracasts.com/discuss/channels/ ... ext-fields

13 févr. 2017, 17:54

le problème de la bibliothèque UI c'est que c'est prêt à consommer et que ça ne correspond pas exactement à ce que je veux faire.

Euh... Jquery UI c'est juste une librairie javascript, tu peux faire ce que tu veux avec et le modifier comme tu veux...

Du coup si tu ne veux pas d'un tuto car trop didactique, mais que dans le même temps un exemple qui marche est trop "prêt à consommer", c'est un peu compliqué de t'aider

15 févr. 2017, 11:06

Oui pardon, je ne veux pas donner l'impression de cracher dans la soupe : mon problème c'est juste que je suis nul en jquery et que donc je n'arrive pas à le modifier

Je vais étudier la question, et je poste le résultat ici si j'arrive à quelque chose.

15 févr. 2017, 13:13

Ça roule bon courage !

15 févr. 2017, 19:58

Bon eh bien j'en suis le premier surpris, mais ça marche $\:D/$

Je pose ça là, au cas où, un jour, quelqu'un...

1. Le html (expurgé de plein de trucs, je laisse l'essentiel) :

Code : Tout sélectionner

<FORM method='POST' action='page.php'>
<label for='societe'>Société</label><input type='text' class='ui-autocomplete-input' id='societe' name='societe' />
<label for='nom'>Nom</label><input type='text' id='nom' name='nom' />
<label for='prenom'>Prénom</label><input type='text' id='prenom' name='prenom' />
<label for='adresse1'>Adresse</label><input type='text' id='adresse1' name='adresse1' />
<label for='adresse2'>Adresse (suite)</label><input type='text' id='adresse2' name='adresse2' />
<label for='codepostal'>Code postal</label><input type='text' id='codepostal' name='codepostal' />
<label for='ville'>Code postal</label><input type='text' id='ville' name='ville' />
<label for='pays'>Pays</label><select name='pays' id='pays'>
<?php
$result = mysqli_query($DB, "SELECT * FROM pays ORDER BY pays ASC");
while($row = mysqli_fetch_array($result))
{
	echo "<option value=\"".$row['pays']."\">".$row['pays']."</option>";
}
?>
</select>
<input type='submit' value='VALIDER' name='valid' id='valid' />
</FORM>

Les inclusions et scripts en début de page :

Code : Tout sélectionner

<script src='https://code.jquery.com/jquery-1.12.4.js'></script>
<script src='https://code.jquery.com/ui/1.12.1/jquery-ui.js'>
<script>
$(document).ready(function()
{
	var recherche = {
						source: 'recherche.php',
						select: function(event, ui)
						{
							$('#societe').val(ui.item.societe);
							$('#nom').val(ui.item.nom);
							$('#prenom').val(ui.item.prenom);
							$('#adresse1').val(ui.item.adresse1);
							$('#adresse2').val(ui.item.adresse2);
							$('#codepostal').val(ui.item.codepostal);
							$('#ville').val(ui.item.ville);
							$('#pays').val(ui.item.pays);
						},
						minLength:1
					};
	$('#societe').autocomplete(recherche);
});
</script>

<link rel='stylesheet' href='jquery-ui.css' />

La page recherche.php :

Code : Tout sélectionner

// Informations de connexion à la base
include('_inc.configuration.php');

// Empêche l'accès direct à la page
if(!(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest'))
	trigger_error('Accès refusé', E_USER_ERROR);

// Définition de la recherche, suppression des tags, remplacement des espaces multiples...
// $term est le nom de la variable utilisé par l'autocomplétion de jquery UI
$term = addslashes(strip_tags(trim($_GET['term'])));
$term = preg_replace('/\s+/', ' ', $term);

$a_json = array();
$a_json_row = array();

// Recherche dans la base (ici sur le champ societe, encore une fois j'ai viré du code superflu pour la compréhension)
$sql = "SELECT * FROM adresses WHERE societe LIKE '%".$term."%'";
$result = mysqli_query($DB, $sql);
while($row = mysqli_fetch_array($result))
{
	$a_json_row["label"] = $row['societe'];
	$a_json_row["nom"] = $row['nom'];
	$a_json_row["prenom"] = $row['prenom'];
	$a_json_row["adresse1"] = $row['adresse1'];
	$a_json_row["adresse2"] = $row['adresse2'];
	$a_json_row["codepostal"] = $row['codepostal'];
	$a_json_row["ville"] = $row['ville'];
	$a_json_row["pays"] = $row['pays'];
	array_push($a_json, $a_json_row);
}
 
$json = json_encode($a_json);
echo $json;

...Et si je n'ai rien oublié, ça marche du tonnerre !

15 févr. 2017, 23:53

Félicitations et merci à toi pour le partage de la solution

[RESOLU] Formulaire autocomplétion (+ json ? + jquery ?)

Qui est en ligne