[AJAX] Saisie semi automatique dans un formulaire

**sebaaas** · 18/05/2007, 13h12

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 :

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

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

**guiltouf** · 18/05/2007, 13h42

Un truc du genre : http://demo.script.aculo.us/ajax/autocompleter

**sebaaas** · 18/05/2007, 16h40

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

**guiltouf** · 18/05/2007, 16h48

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.

**sebaaas** · 19/05/2007, 01h21

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 :

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

**sebaaas** · 19/05/2007, 13h25

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

**guiltouf** · 19/05/2007, 17h22

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

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 :

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

**sebaaas** · 20/05/2007, 01h21

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

**sebaaas** · 22/05/2007, 19h54

youhouuuu j'ai trouvé

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

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

[AJAX] Saisie semi automatique dans un formulaire

JavaScript

Discussions similaires

Partager

Partager