auto completion avec Jquery
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
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
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 fichier de traitement (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
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!';
}
?> |
le CSS:
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
|
.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
