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 - Modifié le 18 août 2022 à 15:39
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

Bonjour à tous,

Pour améliorer mon formulaire, j'ai remplacé un SELECT (alimenté par une base de données) par un INPUT en autocomplete (JQuery). L'INPUT affiche bien dès la saisie du premier caractère la liste des clients correspondant mais je ne sais pas comment faire pour récupérer l'id_client avant l'envoi du  formulaire !
J'aimerai aussi savoir comment interdire l'envoi du formulaire si la saisie de cet INPUT ne contient pas un nom valide de client.

Voici mon code : 

<input type="text" name="nomclient" id="nomclient" class="input-formulaire contrat-nom" placeholder="Recherche par nom..." >

Script :

// ########## AUTOCOMPLETION ###########
<script src=""></script>
<script src=""></script>

$( function() {
    $( "#nomclient" ).autocomplete({
        source: "clients-liste.php",
        minLength: 1
    });
});

clients-liste.php :

<?php
require ("connexion.php");
$term = $_GET['term'];

// j'effectue ma requête SQL grâce au mot-clé LIKE
$requete = $bdd->prepare('SELECT id_client, nom, prenom FROM clients WHERE nom LIKE :term'); 
$requete->execute(array('term' => '%'.$term.'%'));
 

// on effectue une boucle pour obtenir les données 
while($donnee = $requete->fetch()) {
    $value=$donnee['nom'] . ' ' . $donnee['prenom'];
    $label=$donnee['nom'] . ' ' . $donnee['prenom'];
    $json[]=array(
        'value'=> $value,
        'label'=> $label
    );
}

// il n'y a plus qu'à convertir en JSON 
echo json_encode($json); 


?>

Merci d'avance pour votre aide !

4 réponses

jordane45 Messages postés 38299 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 novembre 2024 4 704
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"


1
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20
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 ?

0
jordane45 Messages postés 38299 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 novembre 2024 4 704
19 août 2022 à 09:05

Quel rapport entre  autoFocus:true,  scroll: true,   ... et la question initialement posée ?

0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20
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);
?>
0
jordane45 Messages postés 38299 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 novembre 2024 4 704
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.

0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20 > jordane45 Messages postés 38299 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 novembre 2024
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 ?

0
jordane45 Messages postés 38299 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 novembre 2024 4 704 > 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 à 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.. )

1
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20
19 août 2022 à 13:26

Merci beaucoup, Jordan, je vais potasser ça pour améliorer encore un peu le rendu !

0