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

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : [RESOLU] Formulaire autocomplétion (+ json ? + jquery ?)

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

par @rthur » 15 févr. 2017, 23:53

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

Re: Autocomplétion pour formulaire adresse (php + ajax + json + jquery)

par finipe » 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 ! :D

Re: Formulaire autocomplétion (+ json ? + jquery ?)

par @rthur » 15 févr. 2017, 13:13

Ça roule bon courage !

Re: Formulaire autocomplétion (+ json ? + jquery ?)

par finipe » 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 :D

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

Re: Formulaire autocomplétion (+ json ? + jquery ?)

par @rthur » 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 :D

Re: Formulaire autocomplétion (+ json ? + jquery ?)

par finipe » 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

Re: Formulaire autocomplétion (+ json ? + jquery ?)

par @rthur » 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/

Re: Formulaire autocomplétion (+ json ? + jquery ?)

par finipe » 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 :D

Re: Formulaire autocomplétion (+ json ? + jquery ?)

par @rthur » 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

Formulaire autocomplétion (+ json ? + jquery ?)

par finipe » 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.