Bonjour à tous, je m'arrache les cheveux sur un problème que je ne pensais pas trop rencontrer.
Je suis en train de réaliser une auto completion avec Jquery, je travaille sur une BDD oracle, le principe est simple, on tape une lettre, on a alors une suggestion de nom (ou prenom, en l'occurence mais je pourrais très bien tester avec un autre champ) de coureurs, puis en tapant une 2eme on a une suggestion plus précise etc...
voici mes sources:
fichier recherche_coureur.html dans lequel on se sert de l'auto completion
le fichier de traitement (PHP):
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53 <form action="ajout_participation.php" method="post" enctype="multipart/form-data" > <script type="text/javascript" src="jquery-1.2.1.pack.js"></script> <script type="text/javascript"> function recherche_completion(champ, id_block, liste_completion) { if(champ.value.length == 0) { // ne pas afficher la completion. document.getElementById(id_block).hide(); } else { $.post("system/traitement_completion.php", {champ:""+champ+"", block:""+id_block+"", texte_completion:""+champ.value+"", id:""+champ.id+""}, function(data) { if(data.length >0) { document.getElementById(id_block).show(); liste_completion.html(data); } }); } } // fin recherche_completion function completer(valeur, champ, block_completion) { champ.val(valeur); setTimeout("getElementById(id_block).hide();", 200); } </script> <TABLE> <TR> <TD> Prénom: </TD> <TD> <div><input type="text" id="prenom" name="prenom" onkeyup="recherche_completion(this,""block_prenom"", $('#liste_prenom') );" onblur="completer();" /></div> <div class="block_completion" id="block_prenom" style="display: none;"> <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /> <div class="liste_completion" id="liste_prenom"> </div> </div></TD> </TR> <TR> <TD> Nom: </TD> <TD> <div><input type="text" name="nom" id="nom" onkeyup="recherche_completion(this.value, this.id);" onblur="completer();"/> </div> <div class="block_completion" id="block_nom" style="display: none;"> <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" /> <div class="liste_completion" id="liste_nom"> </div> </div></TD> </TR> <TR> <TD></TD><TD><input type="submit" name="submit_coureur" disabled="true"/></TD> </TR> </TABLE> </form>
le CSS:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50 <?php session_start(); require('fonctions.php'); $login = $_SESSION['login']; $pass = $_SESSION['pass']; $instance = 'info'; $conn = OuvrirConnexion($login, $pass,$instance); // si il y a un texte à compléter if(isset($_POST['texte_completion'])) { $texte_completion = strtoupper($_POST['texte_completion']); $id= strtoupper($_POST['id']); $champ = $_POST['champ']; $block = $_POST['block']; print $block; if(strlen($texte_completion) >0) { $req="SELECT ".$id." FROM tdf_coureur WHERE ".$id." LIKE '".$texte_completion."%' and rownum < 11"; $cur = ExecuterRequete($conn,$req); $tab = RecupererDonnee($cur,$nbLignes); if($nbLignes > 0) { for ($i=0;$i<$nbLignes;$i++) { print '<li onClick="completer(\''.$tab[$i][$id].'\', '.$champ.','.$block.');">'.$tab[$i][$id].'</li>'; } } else { print 'Pas de résultats'; } } else { // on fais rien } } else { print 'Erreur!'; } ?>
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 .block_completion { position: relative; left: 30px; margin: 10px 0px 0px 0px; width: 200px; background-color: #000000; -moz-border-radius: 7px; -webkit-border-radius: 7px; border: 2px solid #000; color: #fff; } .liste_completion { margin: 0px; padding: 0px; } .liste_completion li { margin: 0px 0px 3px 0px; padding: 3px; cursor: pointer; } .liste_completion li:hover { background-color: #f6bb19; }
Je tiens à préciser que dans le fichier HTML + JS, si j'utilise directement les types HTML, j'arrive à obtenir la completion, mais ça me poste un probleme: quand j'envoie les paramètres au fichier PHP, j'ai besoin d'avoir une chaine de caractère, car PHP ne sait pas gérer les Objets HTML...
merci d'avance pour vos réponses
Partager