Autocompletion : récupérer l'ID de la selection ?
Résolu/Ferméemrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 - 19 août 2022 à 13:26
4 réponses
18 août 2022 à 16:46
Bonjour,
Intéresse toi à l'event "select" de l'autocomplete.
Tu pourras mettre du code pour que, lors de la selection dans ton autocomplete, cela récupère la value et la mette dans un champ input type='hidden"
19 août 2022 à 08:59
Merci Jordan pour ton conseil...
Avant daller plus loin, je fais des essais en suivant des tutos avec :
autoFocus:true,
scroll: true,
Je change les valeurs true en false ou inversement, mais rien ne se passe !
Je vide le cache, recharge la page avec CTRL+ F5 => idem
J'ai pourtant intégré à ma page les fichiers jquery.min.js, jquery-1.9.1.js et jquery-ui.js
D'où peut venir le problème ?
19 août 2022 à 09:05
Quel rapport entre autoFocus:true, scroll: true, ... et la question initialement posée ?
Modifié le 19 août 2022 à 09:49
Comme je te l'ai dit, j'essaie de comprendre en lisant la doc JQuery comment fonctionne l'instruction autocomplete et je m'étonne de voir que mes options ne sont pas prises en compte... Je me demandais, avant de chercher pendant des heures si je n'avais pas oublié un paramètre pour que cette instruction fonctionne correctement ?
En attendant de tout comprendre, j'ai fait ça qui semble fonctionner, mais est-ce clean de programmer comme ça :
<input type="text" name="nomclient" id="nomclient" class="input-formulaire contrat-nom" placeholder="Recherche par nom..." > <input type="hidden" name="client" id="idClient" value="">
$('#nomclient').autocomplete({ source: "clients-liste.php", select: function (event, ui) { $("#nomclient").val(ui.item.label); $("#idClient").val(ui.item.id); } });
clients-liste.php :
<?php require ("connexion.php"); $term = $_GET['term']; $requete = $bdd->prepare('SELECT id_client, nom, prenom FROM clients WHERE nom LIKE :term'); $requete->execute(array('term' => '%'.$term.'%')); while($donnee = $requete->fetch()) { $value=$donnee['id_client']; $label=$donnee['nom'] . ' ' . $donnee['prenom']; $json[]=array( 'value'=> $label, 'label'=> $label, 'id'=>$value ); } echo json_encode($json); ?>
19 août 2022 à 10:20
Oui c'est bien comme ça que ça fonctionne.
En ce qui concerne les autres "options" que tu testes, il serait bien de créer une discussion qui leur soit propre.
Discussion dans laquelle tu préciseras la version de jquery et celle de jquery ui utilisées ( voir même en nous mettant le code html complet de ta page .. ainsi que le code JS contenant tes essais...)
A noter que l'option autofocus, par exemple, est apparue après la version 1.8.11 de jquery ui. et le scroll ..ne semble pas exister.
Modifié le 19 août 2022 à 11:01
Ok, je ferais ça sous une autre discussion, car pour l'instant je ne mets aucune option et cela n'affecte pas le résultat que je recherche...
Par contre j'ai encore deux questions en rapport à autocomplete :
1. Une div ui-helper-hidden-accessible est générée en bas de ma page, elle contient les résultats également... Je l'ai effacée avec :
.ui-helper-hidden-accessible {
display: none;
}
À quoi sert cette DIV, peut on empêcher sa création ?
2. Plus ennuyeux :
Si l'utilisateur efface les caractères de l'input nomclient, la value de l'input hidden elle ne s'efface pas...
Si l'utilisateur écrit n'importe quoi dans nomclient après que la value ait reçue une valeur, la value reste
acquise !
Alors c'est vrai que si le formulaire est validé, même s'il y a n'importe quoi dans l'input nomclient c'est l'input
hidden qui compte mais comment obtenir un résultat plus "pro" (ou propre) ? En empêchant le départ du formulaire
si le champ nom n'est pas formaté correctement NOM + Prénom par exemple ?
19 août 2022 à 12:22
là encore.. ce sont des questions sans rapport avec celle de départ ...
Mais bon.. pour gérer la suppression de la value dans l'input hidden, Il faut détécter les changements dans ton input autocomplete. Pour ça, l'autocomplete dispose d'un event "CHANGE".
D'ailleurs.. je te conseille de garder la doc sous la main pour savoir ce qui est possible...
https://api.jqueryui.com/autocomplete/
Pour ce qui est d'empecher l'envoi du formulaire .. il suffit de tester si le champ est rempli ou non ( tu peux faire ça en javascript en interceptant l'event submit du formulaire... ou sur le "onclick" du bouton qui permet son envoi.. )
19 août 2022 à 13:26
Merci beaucoup, Jordan, je vais potasser ça pour améliorer encore un peu le rendu !