auto completion avec Jquery

**surpriz** · 15/10/2008, 09h59

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 :

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">
    &nbsp;
  </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">
	    &nbsp;
	  </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 :

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!';
   }
 
 
?>

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
 
.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

**E.Bzz** · 15/10/2008, 10h39

Bonjour,

Envoyé par surpriz

un problème que je ne pensais pas trop rencontrer.

Oui, bien : tu nous a présenté le cadre.

Mais quelle est l'erreur ?

A+

**surpriz** · 15/10/2008, 13h25

le problème principal:
le document.getElementById() ne fonctionne pas pour les <div> mais fonctionne pour les input...

voici le code un peu plus propre

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
54
<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(id_champ, id_block, liste_completion) {
    var champ = document.getElementById('prenom');
    var block = document.getElementById('block_prenom');
   alert(block.name);
    if(champ.value.length == 0) {
	// ne pas afficher la completion.
	block.hide();
    }
    else {
	$.post("system/traitement_completion.php", {champ:""+id_champ+"", block:""+id_block+"", texte_completion:""+champ.value+"", id:""+champ.id+""}, function(data) {
		if(data.length >0) {
		    $('#block_prenom').show();
		    liste_completion.html(data);
		}
	    });
    }
} // fin recherche_completion
 
function completer(valeur, id_champ, id_block) {
    champ = document.getElementById(id_champ);
    champ.val(valeur);
    setTimeout("document.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.id,'block_prenom', $('#liste_prenom'));" onblur="completer();" /></div>
	<div class="block_completion" name="block_prenom" 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">
    &nbsp;
	  </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">
	    &nbsp;
	  </div>
      </div></TD>
 
 
    </TR>
    <TR>  	
      <TD></TD><TD><input type="submit" name="submit_coureur" disabled="true"/></TD>
    </TR>
  </TABLE>
</form>

j'ai laissé les tests pour vérifier les getElementById

**Bovino** · 15/10/2008, 13h35

C'est normal

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var champ = document.getElementById('prenom');
    var block = document.getElementById('block_prenom');
   alert(block.name);
    if(champ.value.length == 0) {...

Un div n'a pas de value (à la différence des input) mais plutôt en général un innerHTML.

**E.Bzz** · 15/10/2008, 13h42

+1

De plus, il faut sortir ton passage <script> du form.
Il doit être déplacé dans la partie <head> de la page.

A+

**surpriz** · 15/10/2008, 17h42

Envoyé par Bovino

C'est normal

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var champ = document.getElementById('prenom');
    var block = document.getElementById('block_prenom');
   alert(block.name);
    if(champ.value.length == 0) {...

Un div n'a pas de value (à la différence des input) mais plutôt en général un innerHTML.

non, ce getElementById fonctionne bien, de plus, ce n'est pas un div mais un input de type texte, d'ou la vérification.

celui qui ne fonctionne pas, c'est celui la

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var block = document.getElementById('block_prenom');

(le alert est là uniquement pour tester, et il me renvoie undifined

**Bovino** · 15/10/2008, 18h05

Le problème vient peut-être du name, essaye avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert(block.id)

par exemple.

auto completion avec Jquery

jQuery

Vue hybride

Discussions similaires

Partager

Partager