Discussion :

[Doldz]

Bonjour,

Mon problème est le suivant j'ai suivi un tutoriel sur l'autocomplétion ajax tout fonctionne à merveille, j'y ai même ajouter une petite modif pour qu'il accède aux informations de ma base de données plutôt qu'à une liste en dur, mais le problème c'est que j'ai un formulaire dans le lequelle il y a plusieurs input box.

On renseigne dans le formulaire un nombre de participants et des inputs box vont s'afficher en fonction du nombre choisi, sur la première input box je vais pouvoir faire de l'autocomplétion pour le nom du premier participant mais je ne vais pas pouvoir le faire sur les suivantes.


Là je vais déclarer mes fonctions ( dans cette exemple j'utilise deux input box l'une qui va définir le type de sport pratiqué et l'autre pour définir les participant le problème est le même dés qu'il y a plus d'une input box l'autocomplétion ne fonctionne pas)

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
<script type="text/javascript" src="autocomplete_part.js"></script>
<script type="text/javascript">
window.onload = function participant()
{
	initAutoComplete(
					 document.getElementById('form-test'),
					 document.getElementById('champ-texte'),
					 document.getElementById('bouton-submit')
					 )
};
</script>
 
<script type="text/javascript" src="autocomplete_type.js"></script>
<script type="text/javascript">
window.onload = function type()
{
	initAutoComplete(
					 document.getElementById('form-test'),
					 document.getElementById('type'),
					 document.getElementById('bouton-submit')
					 )
};
</script>

le code des inputs box

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
<td><div align="left">Type</div></td>
    <td><input size="8px" type="text" name="type" id="type" autocomplete="off" /></td>
</tr>
<tr>
	<td><div align="left">Lieu</div></td>
    <td><input size="8px" type="text" name="lieu" /></td>
 
	<td><div align="center">Nb Participant</div></td>
    <td><input size="8px" type="text" name="nb_participant" onchange="this.form.submit()"></td>
</tr>
<?php
        if (empty($_POST['nb_participant'])){}
        else
        {
                $i =1;
                $nb_part = $_POST['nb_participant'];
                while ($nb_part)
                {
                        echo "<tr>
                                        <td><div align=\"left\">Participant ".$i."</div></td>
                                        <td><input size=\"8px\" type=\"text\" name=\"champ-texte\" id=\"champ-texte\" autocomplete=\"off\" /></td>
                                  </tr>";
                        $nb_part--;
                        $i++;
                }
        }
?>

dans ce cas je vais pouvoir faire de l'autocomplétion avec l'input de name="type" mais pas sur champs-texte

le tuto que j'ai suivi sur l'autocomplétion est http://dcabasson.developpez.com/arti...ion-pas-a-pas/

[Bovino]

Tu affectes 2 fois window.onload, donc la seconde fois, cela écrase la précédente.
Pour ajouter un événement, il est préférable de passer par attachEvent / addEventListener.

[Doldz]

Donc je fais

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript" src="autocomplete_part.js"></script>
<script type="text/javascript">
window.attachEvent = function participant()
{
	initAutoComplete(
					 document.getElementById('form-test'),
					 document.getElementById('champ-texte'),
					 document.getElementById('bouton-submit')
					 )
};
</script>

Sur le second ?

Car en testant ça me lance l'autocomplétion de participant dans la box de type et ça marche pas plus... y en a toujours qu'une qui fonctionne

[Bovino]

Euh... non, attachEvent, ça fonctionne pas comme ça
Au pire, tu peux juste faire :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
window.onload = function participant()
{
	initAutoComplete(
		document.getElementById('form-test'),
		document.getElementById('champ-texte'),
		document.getElementById('bouton-submit')
	);
	initAutoComplete(
		document.getElementById('form-test'),
		document.getElementById('type'),
		document.getElementById('bouton-submit')
	);
};

[Bovino]

Ah j'avais pas bien vu que tes id ne sont pas uniques sur ta page !!!

[Doldz]

Ah j'avais pas bien vu que tes id ne sont pas uniques sur ta page !!!

Et bien pour les participants si mais pour le type de sport et les participants il sont forcément différent...

Sinon j'ai fais ça

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
<script type="text/javascript" src="autocomplete_type.js"></script>
<script type="text/javascript" src="autocomplete_part.js"></script>
<script type="text/javascript">
window.onload = function()
{
	initAutoComplete(
		document.getElementById('form-test'),
		document.getElementById('champ-texte'),
		document.getElementById('bouton-submit')
	);
	initAutoComplete(
		document.getElementById('form-test'),
		document.getElementById('type'),
		document.getElementById('bouton-submit')
	);
};
</script>

et j'ai aucune des deux autocomplétion qui fonctionne du coup...

en faite y a une truc que je comprend pas trop dans le tuto il y a un fichier .js dans lequel on va charger un fichier .php qui va créer un fichier en xml des entrés possible pour tel ou tel input. et je comprend pas comment (du coup) avec ça il peut faire la différence si c'est pour un type ou pour un participant, car avant ce que j'avais fais c'est que j'avais copier le .js en demandant à chacun d'accédé à un fichier .php différent qui créer donc la liste soit des type de sport soit des participants

Code :

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

1
2
<script type="text/javascript" src="autocomplete_type.js"></script>
<script type="text/javascript" src="autocomplete_part.js"></script>

là avec ça je vois pas comment il va savoir si il faut utilisé la liste des types de sport ou la liste des participants...

aprés un petit test j'ai remarqué que la seconde déclaration de

Code :

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

<script type="text/javascript" src=...

écrasais la précédente.

[Doldz]

Pour simplifier mon message précédent, lorsque je déclare mes deux fichiers .js qui contiennent la procédure de création des listes d'autocomplétion la seconde déclaration va écraser la premiére (logique)

mais alors comment faire pour créer deux liste d'autocomplétion qui vont chacune travailler sur un name="xx" et name="yy" donc différent ?

[Doldz]

J'ai résussi à créer deux liste différentes en xml ( je vous rappel que le code de l'autocomp est disponibles sur le tuto ici http://dcabasson.developpez.com/arti...ion-pas-a-pas/[/QUOTE]) mais je ne saurais pas comment faire pour les utiliser selon les inputs...

[SpaceFrog]

passe l'id de l'input en paramètre de la fonction ...