[AJAX] saisie semi-automatique dans une liste déroulante

**Imana E.I.** · 22/12/2009, 21h15

bonsoir à tous,
je cherche à appliquer une saisie semi-automatique sur une liste déroulante qui dépend d'une autre liste.
je m'explique:
j'ai deux listes liées (j'ai utilisé la technologie AJAX ) et maintenant je veux ajouter l'option de la saisi semi-automatique pour la deuxième liste (comme dans l'exemple "...or you can turn a regular select with countries list to an autocompleted one: " http://momche.net/publish/article.php?page=acdropdown)
vous trouvez dans les fichiers joints le script que j'ai utilisé pour crée les deux listes.
je galère depuis un bon moment j'espère trouver de l'aide

merci

**Pymento** · 23/12/2009, 09h39

http://blog.pascal-martin.fr/post/Sc...ons-dynamiques

**Imana E.I.** · 23/12/2009, 10h18

merci Pymento, mais ce que je cherche c'est pas de faire un champ avec autocompletion mais plutôt autocomplter une liste qui existe déjà.
ç-à-d, au début et avant que l'utilisateur tape une lettre, afficher toute la liste.

**Pymento** · 23/12/2009, 11h40

du genre, tu met dans un champs les départements, et il te sort la liste des villes ?

**E.Bzz** · 23/12/2009, 12h12

Bonjour,

Envoyé par Pymento

du genre, tu met dans un champs les départements, et il te sort la liste des villes ?

Non, ça c'est des listes liées et c'est déjà en place, comme indiqué dans la 2° phrase.

Le but ici est que, en se plaçant dans la liste des villes, par exemple, si l'utilisateur tape la lettre "P", la liste se positionne sur "PARIS" (au hasard ...)

@Imana : il faut utiliser l'évènement onkeypress pour récupérer la lettre tapée par l'utilisateur. Puis tu parcours les options de la liste, et quand tu trouves la bonne, tu la passes en selected=true

A+

**Imana E.I.** · 23/12/2009, 12h14

oui c'est ce que j'ai fait déjà( deux listes dépendantes).
et puisque la liste des villes est très longue(dans mon cas elle peut avoir 3000) je veux ajouter un option de la filtrer selon la saisie de l'utilisateur.

**E.Bzz** · 23/12/2009, 12h16

Envoyé par Imana E.I.

je veux ajouter un option de la filtrer selon la saisie de l'utilisateur.

Cf. ci-dessus

A+

**Imana E.I.** · 23/12/2009, 12h26

E.Bzz : nn c'est pas suffisant
ce que je cherche c'est pas seulement filtrer selon une seul lettre.
exemple l'utilisateur tape "tr" la liste se recharge et ne contient que les mots contiendront 'tr' ex: tr00225 , 001tr1254, 01245tr

**E.Bzz** · 23/12/2009, 12h32

Envoyé par Imana E.I.

E.Bzz : nn c'est pas suffisant

Comme piste, si

Le principe est le même pour la seconde lettre tapée, comme quand on cherche dans un dictionnaire ou un annuaire ...

Ton exemple ne fonctionnera pas si l'utilisateur ne tape qu'une seule lettre. Et pourtant, il faudra bien lui proposer quelque chose

Il suffit d'ajouter une tempo (setTimeout() ) après qu'une lettre ait été tapée, pour lancer la recherche. Une fois les lettres récupérées, tu te sers de cette chaîne pour faire la recherche dans la liste des options. Mais le principe est le même avec une lettre ou plus ...

A+

**E.Bzz** · 23/12/2009, 12h34

Par contre, s'il s'agit bien de villes, en pratique il est bien plus efficace de proposer les choix "commençant par ..." que ceux "contenant ..."

A+

**Imana E.I.** · 23/12/2009, 12h48

non il s'agit pas des villes mais plutôt de numéros de série du produit

je suis débutante et j'ai pas compris exactement ton idée

stp est ce que tu peux expliquer un peu je serai très reconnaissante

**E.Bzz** · 23/12/2009, 14h11

Envoyé par Imana E.I.

non il s'agit pas des villes mais plutôt de numéros de série du produit

Arf !

Me suis trompé à cause de l'exemple de ton 1° post

S'il s'agit de référence comme celles que tu as données en exemple, et si la chaîne recherchée ("tr" dans ton exemple ci-dessus) peut être présente n'importe où dans le "mot", il vaudrait mieux filtrer ta seconde liste avant, il me semble.

Tu gardes ta première liste pour faire un premier choix
Tu proposes un input text permettant de saisir le filtre "tr" (par exemple)
Tu n'affiches dans la 2° liste que les choix correspondants à ta 1° liste ET aux caractères saisis dans l'input

Ça sera à mon avis moins compliqué que la pseudo auto-completion sur la seconde liste comme tu voulais le faire.
Il ne s'agit plus que d'une petite modification de tes listes liées existantes (pour prendre en compte l'input comme filtre supplémentaire à appliquer à la 2° liste).

Ai-je été plus clair ce coup-ci ?

A+

**Pymento** · 23/12/2009, 14h19

ok, dans ce cas moi je propose que tu applique à ton input (si j'ai bien compris ?) un onChange(). Puis tu appelles ta fonction AJAX avec la 'Value' de ton input. Ensuite y'a plus qu'a comparer!

Je suis encore à coté de la plaque ?

**E.Bzz** · 23/12/2009, 14h25

Envoyé par Pymento

Je suis encore à coté de la plaque ?

Je ne trouve pas ... vu que tu viens de répéter en 3 phrases ce que j'ai un peu plus détaillé dans le post précédent

A+

**Pymento** · 23/12/2009, 14h48

Envoyé par E.Bzz

Je ne trouve pas ... vu que tu viens de répéter en 3 phrases ce que j'ai un peu plus détaillé dans le post précédent

A+

Ha dsl j'avais pas lu ! j'étais resté sur la page d'édition du post et j'ai fait autre chose entre temps^^

**Imana E.I.** · 23/12/2009, 16h39

Envoyé par E.Bzz

Ça sera à mon avis moins compliqué que la pseudo auto-completion sur la seconde liste comme tu voulais le faire.

oui c sur mais ici mon client insiste sur le point qu'on auras toute la liste au début ( en cas ou l'utilisateur ne sait pas quel option choisir)

le problème c'est que j'ai réussi a filtrer une simple liste mais le script ne fonctionne pas avec une liste dépendante d'une autre

**E.Bzz** · 23/12/2009, 16h51

Envoyé par Imana E.I.

oui c sur mais ici mon client insiste sur le point qu'on auras toute la liste au début ( en cas ou l'utilisateur ne sait pas quel option choisir)

Oui, mais quand il aura attendu 20 secondes que la page charge les 3000 lignes alors qu'il n'en a besoin à chaque fois que d'une dizaine, il changera peut être d'avis

(je sais, c'est peut être difficile de lui dire

)

Envoyé par Imana E.I.

le problème c'est que j'ai réussi a filtrer une simple liste mais le script ne fonctionne pas avec une liste dépendante d'une autre

C'est peut être dû à la manière dont tu intègres cette 2° liste dans ta page ...
Par exemple dans ta fonction readData(oData), il vaudrait peut être mieux utiliser new Option(text, value) plutôt que faire des appendChild().
De plus on dirait que tu essayes de donner un name à chaque option, ce qui ne me semble pas une bonne idée ...

A+