Extension automatique d'un input text

Question

Bonjour à tous,

Je ne suis pas sûr d'écrire dans la bonne rubrique mais je tente toujours :)

Je suis en train de créer un site avec un moteur de recherche, et j'aimerai que, quand on commence à taper quelque chose dans le champ de recherche, des propositions de résultats se mettent automatiquement en-dessous.

On peux prendre comme exemple facebook ou wikipedia. Dans wikipedia, si on tape la lettre "a" par exemple, plusieurs possibilités de recherches se mettent en-dessous de l'input.

J'ai essayé d'analyser les codes wikipedia et facebook, mais c'est la folie ! Et avec les mots clefs que je tape sur google, aucune résultat (je ne dois pas taper les bons...).

J'ai besoin d'un exemple simple, pas besoin de faire un appel en Ajax à un fichier qui va me donner les résultats en fonction de ce que je tape.

Un simple exemple où l'input m'affiche le contenu d'un array() javascript quand je tape n'importe quelle lettre me conviendrait très bien !

Si quelqu'un pouvait m'aider à ce sujet...

Merci d'avance !

bricklebrit · Answer

Bon je pense avoir trouvé ma solution sur ce site, en farfouillant dans le menu qui se déroulent automatiquement.

Je vous fait partager mon idée, que je vais tester sous peu :

- On récupère la position absolue du champ de recherche via offsetTop et offsetLeft
-  on créer via un document.write un 
 dont la position absolue est calculée en fonction de la position absolue du champ de recherche
- Dans ce 
 je fais un joli <table> avec le nombre de ligne que je veux afficher sous le champ de recherche, dont je modifie le contenu via un getElementById et un innerHTML
- J'affiche le 
 en jouant avec onmouseover et visibility:hidden :)

Tout ça devrait marcher, merci de m'avoir inspiré :)

Si vous avez des solutions meilleures ou plus fines n'hésitez pas à me les proposer :)

Extension automatique d'un input text

1 réponse

Votre réponse

Discussions similaires