Autocomplete : input avec suggestion liant deux données (ID et nom)
Bonjour,
Je suis très novice dans ce domaine mais j'ai à coeur de réussir un formulaire qui me sauverait la mise dans mon boulot.
Je dois réaliser un formulaire qui permet de saisir pour un employé les missions principales qu'il réalise avec une part (le total doit atteindre 100%).
Je m'appuie sur une base de données mysql que j'alimenterai par un ETL. Pour l'instant, je ne suis qu'en mode test, je saisis les valeurs à la main !
Bref, dans mon formulaire, je commence par saisir l'employé concerné. En piochant des bouts de code sur divers sources, j'ai réussi à mettre en place une auto-complétion sur le nom de l'employé, chose à laquelle je tiens absolument pour une ergonomie utilisateur au top. Mais à la question fatale du "comment je fais si j'ai deux employés avec le même nom ?...", ben je sèche complètement...
Dans l'idée, j'aimerais garder cet input "nom" où je commence à saisir le nom du bonhomme mais le must, ce serait d'avoir dans les suggestions de l'autocomplétion le nom et le matricule de l'employé (donnée évidemment présente en base, dans la même table qui plus est) et le must du must, c'est qu'après avoir cliqué sur le bon nom, l'input "nom" reçoit uniquement le nom et l'input "matricule" reçoit le matricule. Visualiser le matricule, c'est juste pour choisir la bonne personne en cas d'homonymie. Récupérer le matricule dans un input, ça sera pour la requête d'insert en base. Petite précision, dans l'idéal, on pourrait aussi saisir directement le matricule dans l'hypothèse où il est connu par celui qui saisit.
Je mets le code que j'utilise actuellement, merci de votre indulgence, je suis vraiment sans foi ni loi dans le dév. web.... Tant que ça fonctionne !
Le code HTML
Code:
1
2
3
4
5
6
7
8
| <tr>
<td align="left" >Saisir un nom : </td>
<td><input type="text" id="select_agent" name="nom" required/></td>
</tr>
<tr>
<td align="right"><i>Matricule : </i></td>
<td><input type="text" id="mat_agent" name="matricule" /></td> |
Le code javascript :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| <script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script type="text/javascript" src="lib/jquery/jquery.autocomplete.min.js"></script>
<script type="text/javascript" src="lib/mootools/MooTools-Core-1.5.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#select_agent').autocomplete({
serviceUrl: 'agents.php',
dataType: 'json'
});
});
</script> |
Et pour finir, le code PHP :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <?php
if(isset($_GET['query'])) {
// Mot tapé par l'utilisateur
$q = htmlentities($_GET['query']);
// Connexion à la base de données
try {
$bdd = new PDO('mysql:host=localhost;dbname=rh_ana', 'root', '');
} catch(Exception $e) {
exit('Impossible de se connecter à la base de données.');
}
// Requête SQL
$requete = "SELECT Nom, Matricule FROM agent WHERE Nom LIKE '". $q ."%' LIMIT 0, 10";
// Exécution de la requête SQL
$resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
// On parcourt les résultats de la requête SQL
while($donnees = $resultat->fetch(PDO::FETCH_ASSOC)) {
// On ajoute les données dans un tableau
$suggestions_nom['suggestions'][] = $donnees['Nom'] ;
$suggestions_matricule['suggestions'][] = $donnees['Matricule'] ;
}
// On renvoie le données au format JSON pour le plugin
echo json_encode($suggestions_nom);
}
?> |
Est-ce que ma demande est farfelue ? Est-ce compliqué ? Merci d'avance aux bonnes âmes qui voudront prendre de leur temps pour m'éclairer un peu...
Gilles
