/!\ Je préviens, je ne suis pas un fan d'Ajax et compagnie, et je n'y connais pas grand chose.

Je suis en train de faire une application qui necessite de pouvoir ajouter dynamiquement des champs textes, et ceux-ci doivent être autocomplétés. J'utilise le composant Autocompleter de Scriptaculous.


[b]1] [/b]Pour ajouter mes champs textes, j'ai une fonction JS comme cela, appelée quand on clique sur un bouton :

[code]
// [Code 1]
function addInput()
{
c=document.getElementById('cadre');
c2=c.getElementsByTagName('input');

ch=document.createElement('input');
ch.setAttribute('type','text');
ch.setAttribute('name','artist'+c2.length);
ch.setAttribute('id','artist'+c2.length);

c.appendChild(ch);
}
[/code]

Et pour l'autocomplétion, un code qui correspond a cela pour chaque champ texte :

[code]
// [Code 2]
new Ajax.Autocompleter(
"artist"+X,
"artists",
"includes/get_artists.php",
{
paramName: 'artist',
minChars: 1
}
);
[/code]

avec 'artist+X' l'id du champ.

Seulement voilà, soit je n'ai qu'un seul champ autocomplété et je ne peux pas en ajouter, soit je peux en ajouter mais ils ne sont pas autocomplétés.
Je pensais pourtant qu'il aurait "suffit" de copier le code 2 a la fin de la fonction du code 1, ce qui me parait logique avec mon mode de pensée "orienté C".

En attendant, j'ai utilisé l'option "token" dans le constructeur pour pouvoir séparer mes infos par une virgule au lieu de les mettre chacune dans un champ texte.


[b]2][/b] Par defaut, lorsqu'on tape sur <Entrée> pour valider un choix de la liste d'autocomplétion, cela valide le formulaire... gênant ! J'ai fouillé dans le doc de Scriptaculous mais pour l'instant je n'ai rien trouvé...


Liens directs :
- [url=http://wiki.script.aculo.us/scriptaculous/show/Ajax.Autocompleter]Ajax.Autocompleter[/url]
- [url=http://wiki.script.aculo.us/scriptaculous/show/Autocompleter.Base]Autocompleter.Base[/url]


Quelqu'un peut m'éclairer ?
(Si je n'ai pas donné toutes les indicatons, faites le moi savoir ;))


------------------------------------ [edit] -------------------------------------

J'ai en quelque sorte résolu le problème. J'ai modifié l'interface, l'utilisateur saisit ses données autocomplétées toujours dans le même champ, séparées par une virgule.
Quand il appuie sur <entrée> ou <valider>, ça appelle une fonction update() qui ajoute les éléments dans une liste et reset le champ. L'utilisateur a la possibilité de supprimer chaque élément s'il le souhaite.

Au final je trouve même ça + joli !

J'ai résolu le probleme de la touche en entrée en observant l'évènement :

[code]
Event.observe ('artist','keypress',
function(evt)
{
if(evt.keyCode == Event.KEY_RETURN)
{
Event.stop(evt);
update();
}
}
);
[/code]

Bye !