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é: 11 125 / 2 045

Auteur : rubiks10

Ecrire un message privé

Note :

5,63 / 10

Commentaire sur cette source (35)

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 !

autoCompletion_module
- css
  - autoCompletion_style.css 625 octets
- js
  - autoCompletion_lib.js 8 797 octets
- php_required
  - autoCompletion_answer.php 2 492 octets
- autoCompletion_config.php 1 175 octets
autoCompletion Documentation.pdf68 436 octets
base_SQL_exemple.txt 52 802 octets
exemple.php 2 009 octets

Télécharger le zip

Historique

26 septembre 2006 12:25:16 :: Valide W3C

Sources du même auteur

Toutes les sources de rubiks10

Sources de la même categorie

Toutes les sources de la catégorie Navigation

Sources en rapport avec celle ci

Commentaires

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/
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.
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.
Commentaire de rubiks10 le 28/09/2006 15:27:08

Oui merci Kareem!! j'ai oublié cette petite optimisation... et merci pour la note!!
Commentaire de xmag le 11/10/2006 16:08:21

Merci pour cette source, c'est exactement ce qu'il me fallait :)
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?
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.
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--
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--
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 ;)
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...
;-)
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--
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.
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--
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...
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
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 --
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.
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
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 !
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
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.
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
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);
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
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.
Commentaire de buz_16 le 16/11/2006 13:48:28

Effectivement Mac leod, rien ne s'y oppose.
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

@+
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 ;)
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 --
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 ?
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.

@+
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 ?
Commentaire de soundpanther le 23/05/2008 12:15:45

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,
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 --