Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

RECHERCHE AVEC AUTOCOMPLETION AJAX ( AVEC NAVIGATION CLAVIER ET SOURIS )


Information sur la source

Catégorie :Navigation Classé sous : autocompletion, recherche, ajax, dynamique Niveau : Initié Date de création : 26/09/2006 Date de mise à jour : 26/09/2006 12:25:16 Vu / téléchargé: 14 834 / 2 588

Note :
6,4 / 10 - par 10 personnes
6,40 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (37)
Ajouter un commentaire et/ou une note

Description

Lorsque que l’on tape une entrée dans l’input texte les résultats trouvés commençant par votre entrée texte vont s’afficher dynamiquement.
La navigation y est possible au moyen de la souris en passant sur les différents choix mais la navigation est également possible a partir du clavier avec les touches HAUT et BAS

Mais pour mieux comprendre téléchargez l'exemple avec sa documentation fournie.

Pour comparaison cela ressemble au module d'autocompletion Google Suggest mais avec des options en plus et les bugs de navigation résolus ( voir la documentation pour informations )

Necessite bien entendu PHP et javascript

Fonctionne parfaitement sur IE et Mozilla!!!!!!!!
 

Conclusion

Merci de laisser tous vos commentaires afin de régler les problemes eventuels et aussi pour avoir vos avis pour de futures améliorations
Merci encore pour vos commentaires
         --The Rubik's Man--
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Historique

26 septembre 2006 12:25:16 :
Valide W3C

Commentaires et avis

signaler à un administrateur
Commentaire de FREMYCOMPANY le 26/09/2006 19:21:32

PHP n'est pas le seul langage serveur au monde... ;-))

Tu peux aussi utiliser ASP .Net, JSP, ASP, CGI, ...

A noter qu'un script similaire existait déjà... Ca peut de donner des idées pour améliorer le tiens : http://dcabasson.developpez.com/articles/javascript/ajax/ajax-autocompletion-pas-a-pas/

signaler à un administrateur
Commentaire de rubiks10 le 27/09/2006 19:21:37

Fremy

Pour répondre a ton commentaire je connais très bien ce script dont tu m'as donné l'adresse et le code javascript est très lourd comparé a mon script.

Puis je le répète mon mode d'autocomplétion permet lors du clic sur une suggestion d'aller sur une page avec l'id de l'enregistrement dans la base de données comme parametre ce qui permet comme dans mon exemple d'afficher directement une fiche alors que la validation du formulaire sans utiliser les suggestions permet par exemple d'effectuer une recherche approfondie...

L'utilisation est donc vraiment differente du script a l'adresse
"http://dcabasson.developpez.com/articles/javascript/ajax/ajax-autocompletion-pas-a-pas/"

J'ai codé ce module pour une entreprise qui voulait absolument ce syteme avec id dans une base.
Et je me suis rendu compte après coup que ce système m'était demandé par de nombreuses personnes, c'est pourquoi je le laisse maintenant a disposition en téléchargement pour les personnes intéressées.

Donc avant de laisser des commentaires inutiles vérifiez bien les fonctions que le script apporte par rapport a certains déjà existents sur le net...

Encore merci.

signaler à un administrateur
Commentaire de Kareem22 le 28/09/2006 10:54:22

Salut Rubik,

Je me permets de te noter car je trouve ton code plutôt bien construit.

Cà change des formulaires de mails qu'on a l'habitude de voir par milliers sur CodesSources.com

Bref une petite suggestion : la clause DISTINCT dans ta requête serait la bienvenue.

Bonne journée.

signaler à un administrateur
Commentaire de rubiks10 le 28/09/2006 15:27:08

Oui merci Kareem!! j'ai oublié cette petite optimisation... et merci pour la note!!

signaler à un administrateur
Commentaire de xmag le 11/10/2006 16:08:21

Merci pour cette source, c'est exactement ce qu'il me fallait :)

signaler à un administrateur
Commentaire de xmag le 12/10/2006 07:52:31

Petite question, comment fais-tu si tu ne veux pas faire un submit direct lors de la selection?

signaler à un administrateur
Commentaire de buz_16 le 13/10/2006 12:42:53

Salut et bravo pour ce travail très propre. Ceci dit, le résultat n'affiche que l'id et je tente sans succès d'afficher d'autres elements, sans succès.
Quelqu'un peut-il m'aider ?
Merci à tous.

signaler à un administrateur
Commentaire de rubiks10 le 13/10/2006 16:56:33

Salut Xmag

Je ne comprends pas ta question...

Car si on ne fais pas un submit alors je ne vois pas l'intérêt.

Donc explique moi plus précisement ta demande et aussi l'utilisation que tu veux en faire en donnant un exemple afin que je comprenne ta question

Merci

--The Rubik's Man--

signaler à un administrateur
Commentaire de rubiks10 le 13/10/2006 16:59:08

Salut Buz_16

Si l'aide a la saisie ne t'affiche que l'id alors cela veut dire que dans le fichier php de configuration tu n'as pas indiquer le bon champ de ta table representan ce que tu veux afficher

cela dit est-ce que mon exemple fonctionner d'origine sans que tu y touches??

bonne prog

--The Rubik's Man--

signaler à un administrateur
Commentaire de xmag le 13/10/2006 17:22:05

Salut ;)

Ben en fait, si par exemple, tu as un formulaire avec plusieurs champs (qui s'autocomplètent ou pas), vu que tu "submites" ton formulaire au clic, ca ne peut pas fonctionner ;)

signaler à un administrateur
Commentaire de buz_16 le 17/10/2006 09:23:07

Hello rubiks, je suis trop bête... Vu que l'on récup l'id de la table en get via l'url, j'ai réeffectué une requete dans la page de manière à afficher toutes les données liées à cet id...
;-)

signaler à un administrateur
Commentaire de rubiks10 le 17/10/2006 17:57:25

Salut Xmag

Ben en fait mon formulaire n'est jamais " submiter ".
J'intercepte les evenements touche et souris et je fais un redirect en fonction du choix.

Mais cela ne change rien en ton problème et en fait oui pour l'utilisation que tu veux en faire cela ne fonctionnera pas pour plusieurs champs puisqu'en fait meme si le clic ne ferait rien j'utilise un "faux formulaire" qui n'est jamais "submiter"

Mon module permet en fait la redirection mais a partir d'un seul choix... celui de l'input principal

Voila désolé

--The Rubik's Man--

signaler à un administrateur
Commentaire de buz_16 le 20/10/2006 16:18:54

Hello rubiks, j'aimerais savoir quels sont les paramètres à modifier pour faire non pas une recherche sur un seul champ d'une table (comme c'est le cas actuellement) mais sur deux, à savoir un champ comportant des noms et un autre des numéros (de tél par exemple).
Autrement dit, sur des lettres ou sur des chiffres.
Merci pour ton aide et encore bravo.

signaler à un administrateur
Commentaire de rubiks10 le 20/10/2006 20:31:53

Salut buz_16

Le problème est que si tu veux faire une recherche sur 2 champs d'une table alors cela veut dire qu'il faudrait 2 input permettant de faire l'autocomplétion...

Et donc ce n'est plus une vraie autocomplétion a partir d'un seul champ.
Peut etre que je ne comprends pas ton but ( cela est fort possible ) donc pour que je te répondes plus précisément explique moi exactement ton besoin avec un exemple concret que tu veux effectuer.
Puis je pourrais étudier ce cas ( en tout cas voir si cela est faisable facilement sans tout modifier )

J'ai déjà une petite idée mais n'étant pas sur de l'exactitude de ton probleme je préfere attendre une meilleure explication afin de te donner une réponse ciblée et précise.

Voila et encore merci pour ton intérêt pour ma source

--The Rubik's Man--

signaler à un administrateur
Commentaire de buz_16 le 30/10/2006 10:32:55

hello, tu as compris, effectivement, la requete se ferait non pas sur un seul champ, mais sur deux champs d'une même table(en fait le nom de famille d'une personne ou son numéro de telephone).
Donc au niveau du form, celui-ci permettrait soit une recherche sur le nom (comme c'est le cas actuellement grace à ton code) soit sur un numéro...

signaler à un administrateur
Commentaire de macleod7 le 31/10/2006 12:12:59

Salut Buz_16

Je viens de découvrir ton script est je suis emballé.
Cependant ton script ne servirais t'il pas pour un moteur de recherche par exemple, actuellement j'étudie le problème.
ce que j'ai fait j'ai rajouté à la table un champs "url" ainsi ce champ contiendrait par exemple "astuces.php", mais quel fichier faudrait il que je modifie pour avoir avant l'url du site suivi de ce nom de fichier, ainsi quand l'utilisateur fait une recherche par rapport au champs titre et en cliquant sur le choix proposé on cliquerais dessus qui enverrait vers la page concernée. En attendant un point de vue, je continue ma recherche

signaler à un administrateur
Commentaire de rubiks10 le 31/10/2006 13:00:11

Bonjour a tous.

Je suis en train de fignoler une nouvelle librairie que j'ai creer pour faire de l'autocompletion car celle-ci était trop restrictive, la nouvelle sera entierement parametrable et l'instanciation se fera en une commande et vous pourrez creer une autocomplétion différente pour plusieurs champs dans une meme page, des effets d'ouverture et de fermeture sont pré-enregistrés et vous pourrez choisir celui que vous voulez, c'est a vous de définir votre propre fonction executée lors de la validation d'un choix ( la fonction par defaut déja enregistrée change la valeur de l'input par le texte du choix selectionné )
Puis plein d'autres options comme le nombre minimal de caractere pour que l'autocomplétion se lance, aussi le choix d'utiliser soit ajax pour effectuer des requetes dans une base de données soit la méthode Locale qui permet de rechercher dans un tableau de chaines de caracteres etc....

Voila donc au lieu de mettre a jour cette source je vais en creer une nouvelle donc jetez un petit coup d'oeil de temps en temps a mes sources elle y sera dans peu de temps.

Merci d'avance.

-- The Rubik's Man --

signaler à un administrateur
Commentaire de buz_16 le 02/11/2006 09:35:55

Ouhaaa! Je n'en demandais pas tant ;-) En tout cas encore bravo pour ce code (très bien indenté et commenté) dont je me suis servi pour faire une recherche dynamique d'annuaire.
Je ne manquerai pas de jetter un oeil de temps en temps.
Merci et encore bravo.

signaler à un administrateur
Commentaire de yukhaa le 15/11/2006 09:25:06

ton code est vraiment génial et très interessant il va m'etre très utile néanmoins lorsque je l'utilise (exemple.php) à chaque fois que je sélectionne un film il m'affiche toujours la même chose c'est à dire "fiche du film XXXXXXXXXXX" suivi du numéro de l'id sais tu pk ça fais cela ? j'aimerais bien essayer de traffiquer le code pour essayer d'arranger mais j'ai peur de m'y perdre car j'ai pas encore tout analyser ton code

signaler à un administrateur
Commentaire de buz_16 le 15/11/2006 16:31:47

Bonjour yukhaa, effectivement, c'est normal puisque dans le code de rubiks, on ne récupère que l'id par l'url...
Pour récupérer le reste de la table concernée par l'autocompletion, j'ai pour ma part rajouté une requete dans exemple.php afin de chercher le reste de la table grace à l'id via l'url.
Voili voilou !

signaler à un administrateur
Commentaire de yukhaa le 16/11/2006 09:15:22

Moi aussi j'ai rajouté une requête mais je pense quej'ai du faire une grosse erreur car ça ne marche pas, regardez:
if ( !empty($_GET['id']) )
$req="SELECT titre FROM autocompletion_exemple WHERE id= ".$_GET["id"] ;
$res=mysql_query($req) or die (mysql_error());
$res2=mysql_fetch_array($res);
echo $res2;

Tu as mis quoi comme requete toi BUZ_16

signaler à un administrateur
Commentaire de buz_16 le 16/11/2006 09:37:03

Essaie comme ça.

f (!empty($_GET['id'])){
                        $req="SELECT titre FROM autocompletion_exemple WHERE id= ".$_GET["id"] ;
                        $res = mysql_db_query("ta_base", $req);
                        $valeur_aff = mysql_fetch_array($res);
                        echo $valeur_aff[0];
                        }

Ca devrait aller mieux.

signaler à un administrateur
Commentaire de yukhaa le 16/11/2006 10:06:22

ça me met exctement les mêmes erreurs, regarde:
Warning: mysql_db_query(): Access denied for user: 'ODBC@localhost' (Using password: NO) in c:\program files\easyphp1-7\www\javascriptfr_source_39699\exemple.php on line 49

Warning: mysql_db_query(): A link to the server could not be established in c:\program files\easyphp1-7\www\javascriptfr_source_39699\exemple.php on line 49

Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in c:\program files\easyphp1-7\www\javascriptfr_source_39699\exemple.php on line 50

signaler à un administrateur
Commentaire de buz_16 le 16/11/2006 10:17:13

C'est parce que tu n'es pas connecté à la base...
if (!empty($_GET['id'])){
                         $mysql_link = mysql_connect("localhost", "root", ""); // paramètres de connexion de base en local sur ta machine
                        $req="SELECT titre FROM autocompletion_exemple WHERE id= ".$_GET["id"] ;
                        $res = mysql_db_query("ta_base", $req);
                        $valeur_aff = mysql_fetch_array($res);
                        echo $valeur_aff[0];
                        }
mysql_close($mysql_link);

signaler à un administrateur
Commentaire de yukhaa le 16/11/2006 11:50:58

merci c bon maintenant il ne me reste plus qu'a le faire afficher dans le champ et de l'integrer a un formulaire ça devrait etre bon

signaler à un administrateur
Commentaire de macleod7 le 16/11/2006 12:01:07

Super la requête, elle affiche bien le nom sélectionné, mais dans une partie de la requete en partant de echo $valeur_aff[0]; ne pourrait t'on pas mettre une url par exemple, je regarde ce que je peux faire. En fait mon idée serait de mettre des noms de page avec l'extension, ainsi lors de la recherche, cela nous enverrez sur la page sélectionnée.

signaler à un administrateur
Commentaire de buz_16 le 16/11/2006 13:48:28

Effectivement Mac leod, rien ne s'y oppose.

signaler à un administrateur
Commentaire de rubiks10 le 19/11/2006 16:23:51

Bonjour à tous!!!

Voilà donc comme prévu j'ai posté sur le site ma nouvelle librairie d'autocomplétion!!!!
Donc cette nouvelle librairie est entièrement personnalisable de nombreuses options... etc
Enfin je vous donne l'adresse et vous n'avez plus qu'à juger de vous même.

http://www.javascriptfr.com/code.aspx?ID=40382

@+

signaler à un administrateur
Commentaire de piep14 le 18/01/2007 22:07:08

Slt, je viens de découvrir cette source que je trouve formidable !!
Y a un juste un trucs que je souhaite faire. Lorsque l'on clique sur un nom dans la liste, serait il possible de le faire afficher dans le champ text plutot que de valider le formulaire ?

Merci pour tout ;)

signaler à un administrateur
Commentaire de rubiks10 le 19/01/2007 11:24:16

Salut

Tout d'abord merci pour ton commentaire. Je te conseille d'aller sur ma fiche pour télécharger ma nouvelle librairie d'autocomplétion car celle-ci est vraiment dépassée... la nouvelle te permettra de faire vraiment tout ce que tu veux... voici le lien : http://www.javascriptfr.com/codes/LIBRAIRIE-AUTOCOMPLETION-AJAX-OU-LOCAL-CHOIX-EFFETS-ENTIEREMENT_40382.aspx

voilà
@+

-- The Rubik's Man --

signaler à un administrateur
Commentaire de yukhaa le 19/01/2007 11:27:14

J'ai réussi à adapter ce code a ma base de données mais lorsque je l'ajoute à mon application en php ça me met une erreur javascript "document.autocompletion.autocompletion_input a lavaleur Null ou n'est pas un objet. Aurait tu une idée de ce que peut etre le probleme ?

signaler à un administrateur
Commentaire de rubiks10 le 19/01/2007 12:54:36

Cela veut dire que tu as renomé le nom du formulaire ou le nom de l'input text.

Il faut laisser name="autoCompletion" pour le formulaire et name="autoCompletion_input" pour le champs texte.


mais sinon je vous conseille tous de télécharger ma nouvelle librairie pour l'autocomplétion disponible par le lien que j'ai déposé lors de mon dernier post.

@+

signaler à un administrateur
Commentaire de junior92150 le 13/12/2007 16:25:11

salut ,

j'ai utilisé ton zip pour mettre en place l'autocompletion.

le seule hic , il m'affiche undefined quand je tape une lettre dans le menu qui apparait.

j'ai verifier tous les parametres de connexion, verifier le SELECT que tu donne
tout est bon.

d'ou vient cette valeur undefined qui s'affiche dans le menu ?



est ce que tu aurais une idée ?


signaler à un administrateur
Commentaire de soundpanther le 23/05/2008 12:15:45 1/10

Bonjour,

je vois qu'il n y a pas de réponse depuis 2007 alors je ne V pas trop attendre.
Dommage même erreur que junior92150.

Cordialement,

signaler à un administrateur
Commentaire de rubiks10 le 23/05/2008 13:12:29

Bonjour,

Désolé, je n'ai plus vraiment le temps de répondre à tous le monde.
Par contre je n'assure plus du tout la maintenance sur cette librairie car j'ai depuis longtemps développé une autre librairie d'autocomplétion bien mieux adaptée.

Voici le lien : http://www.javascriptfr.com/codes/LIBRAIRIE-AUTOCOMPLETION-AJAX-OU-LOCAL-CHOIX-EFFETS-ENTIEREMENT_40382.aspx


Sinon votre valeur undefined est dû au fait que vous n'avez pas respecté le nom de la base de donnée, elle doit s'appeler "autocompletion" ou alors vous devez modifier le nom dans le fichier "autoCompletion_config.php"

Voilà mais je vous conseille fortement l'autre librairie.

@+

-- The Rubik's Man --

signaler à un administrateur
Commentaire de witchgunn le 14/05/2009 16:59:41 9/10

Salut, ça à l'air cool cette source, je vais la tester !

signaler à un administrateur
Commentaire de shadownight le 05/07/2009 23:22:45 10/10

UN ÉNORME MERCI a toi .
Je te félicite pour ton travail et la source que je cherchais depuis tant de temps.

Je te met Un grand 10/10

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Suggestion de recherche avec AJAX [ par darb66 ] Bonjour,Je developpe une fonctionnalite AJAX qui propose une liste de choix a l'utilisateur selon ce qu'il entre dans un champ texte... Du meme style Autocompletion Ajax sur plusieurs champs dans un formulaire [ par barney06 ] Bonjour,Je suis entrain d'utiliser l'autocompletion (lorsque l'on tape une entrée dans un champs de formulaire, les résultats trouvés par l'entrée, s' Moteur de recherche [ par nabmoah ] Bonjour.j'aimerai créer un moteur de recherche dynamique avec ajax/php.j'ai visité la page suivante :<a href="http://www.editeurjavascript.com/trucs/3 Formulaire dynamique [ par alphacrash ] Salut à tous, je vous explique mon problème :Je récupère le contenu d'une chaîne, par exemple celle-ci :$chaine="&lt;html&gt;&lt;body&gt;&lt;input typ Interpréter code javascript après chargement AJAX [ par VoLc0m ] Bonjour,J'utilise l'objet XmlHTTPRequest (AJAX) pour charger une page web dans le contenu d'un div. La page chargée dans le div contient du code javas Présentation site web de recherche & IE versus Firefox [ par Tireur ] Bonjour à tous! Ayant posé beaucoup de questions sur le javascript dernièrement, je suis fier de vous présenter le résultat que cela donne : www.quer Comment faire la même chose avec Firefox qu'avec IE [ par Tireur ] Bonjour à tous. J’ai encore une question… hehehe Que voulez-vous, vous êtes la solution! Mise en situation et information : Si vous allez sur ce s Comment faire la même chose avec Firefox qu'avec IE [ par Tireur ] Bonjour à tous. J’ai encore une question… hehehe Que voulez-vous, vous êtes la solution! Mise en situation et information : Si vous allez sur ce s Ajax nouvelle page sur fond transparent [ par mike1310 ] Bonjour à tous, je cherche de la doc sur ajax afin de me permettre d'ouvrir une div transparente par dessus mon site et d'ensuite pouvoir ouvrir une d 3 Listes liées [ par cool27 ] Bonsoir à tous!J'ai besoin de créer 3 listes liées dans un formulaire avec Ajax. Le problème c'est que je ne connaît pas Ajax et que je suis pressé pa


Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :

Comparez les prix Nouvelle version

Photothèque Nouveau !



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 1,123 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.