[AutoComplétion] Drop down list

[tintin31000]

Bonjour tout le monde,

Je voudrais créer une liste déroulante dynamique ....

C'est à dire une liste qui puisse me servir aussi de zone de saisie.
Si dans ma liste j'ai france, italie, ...

Si l'utilisateur tape Fr il faut que ça lui sélectionne France mais s'il tape Es il faut que rien ne s'affiche mais qu'il puisse taper le texte qu'il désire.

De plus, il doit pouvoir dérouler la iste comme une drop down list classique.


Est ce possible ? Si oui avez vous des exemples ou des tutoriaux ?
Merci

modéré par denisC : changement du titre

[SpaceFrog]

ya pas ça dans la faq !?

[denisC]

cf Google Suggest pour un exemple de champ texte avec autocomplétion (avec une requete vers le serveur, ce donttt tu n'as pas forcément beoins).

Pour une discussion en anglais sur comment faire ça, voir Google Suggest Dissected.

Il n'y a malheuresement pas encore de tuto sur cette question.

[tintin31000]

Envoyé par SpaceFrog

ya pas ça dans la faq !?

Non je n'ai pas trouvé ....

[denisC]

Envoyé par SpaceFrog

ya pas ça dans la faq !?

Ca serait bienvenu, mais je ne pense pas que ce soit le cas....

[tintin31000]

Envoyé par denisC

Ca serait bienvenu, mais je ne pense pas que ce soit le cas....

J'ai regardé l'autocomplete mais le truc c'est qu'au départ je n'ai pas la liste entière tu vois ?

Je vais faire autrement ... en mettant une zone texte avec un bouton à côté (une flèche vers le bas) . Ces 2 élèments représenteront la liste déroulante ...

[denisC]

Envoyé par tintin31000

J'ai regardé l'autocomplete mais le truc c'est qu'au départ je n'ai pas la liste entière tu vois ?

C'est bien un champ texte, tu peux mettre ce que tu veux dans la liste. Simplement, quand tu commences à saisir quelque choses, il te propose ce qui commence pareil (sur Google Suggest, il y a tout, mais c'est pas forcé).

A toi de voir...

[SpaceFrog]

une piste...

Code :

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
function position()
{ for (var n=0;n<pays.length;n++)
      { if (pays[n].text.toLowerCase()>=rech.value.toLowerCase())
           { pays.selectedIndex=n;
              n=pays.length;  }  }  }
 
function sel(){
pays.selectedIndex=13;
alert(pays.itemNumber)
}             
</script>

[franculo_caoulene]

Salut,

les exemples pullules en ce moment à ce sujet là. Il te suffit de faire une recherche dans google sur AJAX (ou xmlhttprequest) et tu auras le principe.
Différents exemples : http://javatwist.imingo.net/suggest.php
http://www.codeproject.com/aspnet/GoogleSuggestDictionary.asp

Tu dois récréer ta liste "artificiellement". Une zone texte qui au onkeyup lance une requête sql avec une clause like et au clique sur le bouton tu lance une requête qui sélectionne toutes les occurences de la liste.

Le pricipe AJAX n'a d'intérêt que si ta liste est énorme. Si c'est pour 150 pays autant tout faire coté client en chargeant dans un tableau javascript toute la liste au chargement de la page.

[tintin31000]

J'ai contourné mon problème .... ça pourra peut etre servir à certain.

Au départ j'affiche une zone de texte avec un bouton à côté. Le clic sur ce bouton active la liste déroulante et désactive la zone de texte. (Ce n'est pas exactement ce que je voulais au départ mais bon ...). J'ai fait ça avec un div et une fonction javascript.


Seul problème ... (et oui il en faut un ) ...
Lorsque l'utilisateur saisit une valeur (dans la zone de texte ou la liste déroulante) le résultat retourne une liste déroulante ...
J'aimerai savoir s'il est possible de connaitre le div qui est actif ? (c a dire soit la zone de texte soit la liste déroulante)

[Oluha]

essaye de retrouver mon script qui fait exactement ça avec le xmlhttprequest

[denisC]

Envoyé par Oluha

essaye de retrouver mon script qui fait exactement ça avec le xmlhttprequest

Je l'ai cherché, mais je crains qu'un delestage l'ai emmené loin d'ici (paix à son ame )

[Oluha]

encore ?
bon ben décidemment il est toujours délesté