[AJAX] Saisie semi automatique dans un formulaire

Version imprimable

Bonjour a tous,

J'ai récupéré un code d'un formulaire que j'ai un peu modifier et qui fonctionne parfaitement. Mais je voudrais l'améliorer.
Dans le code que j'ai récupéré, il n'y a qu'un champs pour la saisie semi automatique. Or je voudrais mettre plusieurs champs (l'accès à la base de donnée reste le même). Mais je ne vois pas comment modifier le code (mes connaissance étant assez nul en javascripte).

Je vais essayer d'être un peu plus explicite.
J'ai une base de donnée contenant : "pomme" , "ananas" , "prune"

J'aimerai que dans le 1er champs (INPUT), si je tape "pom" il me propose "pomme" (ce que le code fait déja très bien).
J'aimerai ajouter un 2 ieme (à vrai dire je voudrais mettre 100 INPUT) champs qui, lorsque je tape "ana" me propose "ananas".

Voici le code avec le formulaire index1.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
<html><head></head>
<body>
<script type="text/javascript">
function xxx(newtext) {
document.getElementById('destinataire').value = newtext;
} 
function writediv(texte)
     {
     document.getElementById('nompbox').innerHTML = texte;
     }
 
function verifPseudo(nomp)
     {
     if(nomp != '')
               {
               if(nomp.length<3)
                         writediv('<span style="color:#cc0000"><b>'+nomp+' :</b> ce fruit est trop court</span>');
               else if(nomp.length>30)
                         writediv('<span style="color:#cc0000"><b>'+nomp+' :</b> ce fruit est trop long</span>');
               else
                      writediv(file('ajax.php?destinataire='+escape(nomp)))
               }
 
     }
 
function file(fichier)
     {
     if(window.XMLHttpRequest) // FIREFOX
          xhr_object = new XMLHttpRequest();
     else if(window.ActiveXObject) // IE
          xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
     else
          return(false);
     xhr_object.open("GET", fichier, false);
     xhr_object.send(null);
     if(xhr_object.readyState == 4) return(xhr_object.responseText);
     else return(false);
     }
</script>
 
<form method="get" action="bd.php">
 
Fruit = <input type="text" id="destinataire" name="destinataire" onkeyup="verifPseudo(this.value)" /><div id="nompbox"></div>
 
 
<input type="submit" name="submit" value="Envoyer la valeur" /> 
</form>
</html>

et voici l'accès à la base de donnée ajax.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
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
 
</head>
<body>
<?php
 
$connect = mysql_connect('localhost','root','') or die ("erreur de connexion");
mysql_select_db('bdtest',$connect) or die ("erreur de connexion base");   
$sql = "SELECT nomp FROM tout WHERE nomp LIKE '%".$_GET['destinataire']."%'";
$result = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
$i = 0;
$nomp = "";
echo '<ul>';
while ($row = mysql_fetch_array($result))
    {
    $i++;
    if($nomp == $row['nomp']){
           } else {
 
           echo '<li><a href="#" onclick="xxx(\''.$row['nomp'].'\')">'.$row['nomp'].'</a></li>';
           $nomp = $row['nomp'];
           }
    }
if($i==0) echo '<li>Il n\'y a pas ce fruit</li>';
echo '</ul>';
mysql_close();
 
?>
</body>
</html>

18/05/2007, 13h42
guiltouf

Un truc du genre : http://demo.script.aculo.us/ajax/autocompleter
18/05/2007, 16h40
sebaaas

C'est exactement ce que fait mes 2 pages.

Le problème reste le même. Je n'arrive pas à mettre plusieurs champs, je ne sais pas comment faire ...
18/05/2007, 16h48
guiltouf

En utilisant le lien que je t'ai mis, celà m'étonnerait que tu es besoin de faire ton http request en dur comme tu le fais actuellement...

Bon courage.

L'avantage de mon code est que je ne suis pas obliger de taper les première lettre : si je tape "oir" il va me proposer "poire" de même si je tape "OiR".

Bon j'ai quand même fait un peu évolué mon code le voici

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
54
55
56
57
58
 
<html><head></head>
<body>
<script type="text/javascript">
function xxx(newtext1) {
document.getElementById('destinataire1').value = newtext;
} 
 
function xxx(newtext) {
document.getElementById('destinataire2').value = newtext;
} 
 
function writediv(texte)
     {
     document.getElementById('nompbox1').innerHTML = texte;
     }
 
function writediv(texte)
     {
     document.getElementById('nompbox2').innerHTML = texte;
     }
 
function verifPseudo(nomp)
     {
     if(nomp != '')
               {
               if(nomp.length<3)
                         writediv('<span style="color:#cc0000"><b>'+nomp+' :</b> ce pseudo est trop court</span>');
               else if(nomp.length>30)
                         writediv('<span style="color:#cc0000"><b>'+nomp+' :</b> ce pseudo est trop long</span>');
               else
                      writediv(file('ajax.php?destinataire='+escape(nomp)))
               }
 
     }
 
function file(fichier)
     {
     if(window.XMLHttpRequest) // FIREFOX
          xhr_object = new XMLHttpRequest();
     else if(window.ActiveXObject) // IE
          xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
     else
          return(false);
     xhr_object.open("GET", fichier, false);
     xhr_object.send(null);
     if(xhr_object.readyState == 4) return(xhr_object.responseText);
     else return(false);
     }
</script>
 
<form method="get" action="bd.php">
Produit testé = <input type="text" id="destinataire1" name="destinataire" onkeyup="verifPseudo(this.value)" /><div id="nompbox1"></div>
Produit testé = <input type="text" id="destinataire2" name="destinataire" onkeyup="verifPseudo(this.value)" /><div id="nompbox2"></div>
 
<input type="submit" name="submit" value="Envoyer la valeur" /> 
</form>
</html>

Voici le résultat : j'arrive à taper dans les 2 INPUt et il me renvoit chaque fois des suggestions. L'embettant c'est que lorsque je clique sur une suggestion il me la place directement dans l'INPUTE portant le nom destinataire2, peu importe pour lui que j'ai taper mes lettres à partir de l'INUPT id= destinataire 1 ou destinataire 2.

Voila ou j'en suis.

J'espère que vous pourrez m'aider a modifier ce code.

D'avance merci

19/05/2007, 13h25
sebaaas

Voila, ca avance (je continue avec mon fichier de base)

Voici 2 liens

Le 1er marche mais lorsque je clique sur une proposition du 2eme champs ... il va me remplir le 1er champs.
http://membres.lycos.fr/tados0000/index3.php

Le second lien essaye de corriger ce problème ... mais j'y arrive pas

http://membres.lycos.fr/tados0000/index4.php

Voilà pourquoi ton script ne fonctionne pas :
1/ Tu ne peux pas utiliser deux fois la même fonction
2/ Il faut que tu lui indiques ce que tu veux remplacer, javascript c'est de la logique, pas de l'intelligence ; dommage :lol:
3/ Ton script ne sera pas compatible avec tous les navigateurs

Il faut donc que tu passes l'id du champs à modifier en paramètre comme ceci :

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
<script type="text/javascript">
function writediv(texte, objDiv)
     {
     document.getElementById(objDiv).innerHTML = texte;
     }
 
function verifPseudo(nomp, objDiv)
     {
     if(nomp != '')
               {
               if(nomp.length<3)
                         writediv('<span style="color:#cc0000"><b>'+nomp+' :</b> ce pseudo est trop court</span>', objDiv);
               else if(nomp.length>30)
                         writediv('<span style="color:#cc0000"><b>'+nomp+' :</b> ce pseudo est trop long</span>', objDiv);
               else
                      writediv(file('ajax.php?destinataire='+escape(nomp)), objDiv)
               }
 
     }
 
function file(fichier)
     {
     if(window.XMLHttpRequest) // FIREFOX
          xhr_object = new XMLHttpRequest();
     else if(window.ActiveXObject) // IE
          xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
     else
          return(false);
     xhr_object.open("GET", fichier, false);
     xhr_object.send(null);
     if(xhr_object.readyState == 4) return(xhr_object.responseText);
     else return(false);
     }
 
</script>
</head>
<html>
 
<form method="get" action="bd.php">
 
Produit testé = <input type="text" id="destinataire1" name="destinataire" onkeyup="verifPseudo(this.value, this)" /><div id="nompbox1"></div>
Produit testé = <input type="text" id="destinataire2" name="destinataire" onkeyup="verifPseudo(this.value, this)" /><div id="nompbox2"></div>
 
<input type="submit" name="submit" value="Envoyer la valeur" /> 
</form>
 
</html>

Quoiqu'il en soit, je te conseille vraiment d'utiliser le lien que je t'ai envoyé pour les simples et bonnes raisons que :
1/ Le code est propre
2/ Compatible avec tous les navigateurs
3/ Customisable à volonté
4/ Tu peux très bien rechercher 'oir' pour 'poire', tout dépend du fichier que tu appelles et de la requete.

Prends le temps d'y regarder de plus près, celà répondra à beaucoup de tes besoins et questions.

20/05/2007, 01h21
sebaaas

Merci beaucoup pour ton aide.

Je je de placer le code mais malheureusement cela ne fonctionne pas du 1er coup, il faut que je trouve ce qui cloche.

Merci pour tes sources, j'i regardé et essayer d'appliquer mais je me suis cassé la gueul ... voila pq je suis revenu à l'ancien code qui me semblait plus abouti.
Bon Dimanche

youhouuuu j'ai trouvé

index4.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
51
52
53
54
55
56
 
<html><head></head>
<body>
<script type="text/javascript">
 
 
 
	function xxx(id2, newtext) {
document.getElementById('destinataire'+id2).value = newtext;
}
 
function writediv(id, texte)
     {
     document.getElementById('nompbox'+id).innerHTML = texte;
     }
 
 
function verifPseudo(id, nomp)
     {
     if(nomp != '')
               {
               if(nomp.length<3)
                         writediv(id, '<span style="color:#cc0000"><b>'+nomp+' :</b> ce pseudo est trop court</span>');
               else if(nomp.length>30)
                         writediv(id, '<span style="color:#cc0000"><b>'+nomp+' :</b> ce pseudo est trop long</span>');
               else
                      writediv(id, file('ajax.php?destinataire='+escape(nomp)+'&id='+(id)))
               }
 
     }
 
function file(fichier)
     {
     if(window.XMLHttpRequest) // FIREFOX
          xhr_object = new XMLHttpRequest();
     else if(window.ActiveXObject) // IE
          xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
     else
          return(false);
     xhr_object.open("GET", fichier, false);
     xhr_object.send(null);
     if(xhr_object.readyState == 4) return(xhr_object.responseText);
     else return(false);
     }
</script>
 
<br><br> Mots dans la Base de données : "Pomme" , "Poire", "Ananas" , "Prune", "Pommes" (le serveur de lycos étant un peu lent des fois, il faut insister)<br>
Même s'il indique que l'acces est interdit, taper qq lettre de plus <br> <br>
<form method="get" action="bd.php">
 
Produit testé = <input type="text" id="destinataire1" name="destinataire1" onkeyup="verifPseudo(1,this.value)" /><div id="nompbox1"></div>
Produit testé = <input type="text" id="destinataire2" name="destinataire2" onkeyup="verifPseudo(2,this.value)" /><div id="nompbox2"></div>
 
<input type="submit" name="submit" value="Envoyer la valeur" />
</form>
</html>

ajax.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
 
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
 
</head>
<body>
<?php
$connect = mysql_connect('localhost','tados0000','') or die ("erreur de connexion");
mysql_select_db('tados0000_db',$connect) or die ("erreur de connexion base");   
$sql = "SELECT * FROM tout WHERE nomp LIKE '%".$_GET['destinataire']."%'";
$result = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
$i = 0;
$nomp = "";
echo '<ul>';
while ($row = mysql_fetch_array($result))
    {
    $i++;
	$id2=$_GET['id'];
 
    if($nomp == $row['nomp']){
           } else {
 
           echo '<li><a href="#" onclick="xxx('.$id2.' ,\''.$row['nomp'].'\')">'.$row['nomp'].'</a></li>';
           $nomp = $row['nomp'];
           }
    }
if($i==0) echo '<li>Il n\'y a pas aucun membre pseudo</li>';
echo '</ul>';
mysql_close();
?>
</body>
</html>