LIBRAIRIE AUTOCOMPLETION (AJAX OU LOCAL, CHOIX D'EFFETS, ENTIEREMENT PERSONNALISABLE)

Commentaire de buz_16 le 20/11/2006 09:37:05

Hello rubiks, je teste tout ça de suite. :-))

Commentaire de buz_16 le 20/11/2006 10:24:56

Hello rubiks, manifestement, je dois oublier un paramètrage quelque part. dans le fichier exemple, il n'ya que le second cas qui fonctionne.

Commentaire de rubiks10 le 20/11/2006 11:50:55

Sinon non désolé je n'ai pas de site public....

Et au fait petit rappel pour mon exemple en ajax..
le nom de la base de données doit être : " autocompletion "
le nom de la table doit être : " autocompletion_exemple "

voilou

++

Commentaire de rubiks10 le 20/11/2006 15:17:35

Oui buz_16 effectivement

J'ai oublié de changer lors de ma dernière modification

donc tous les $_POST['post'] doivent être changé en $_POST['film']

c'est à dire dans les 2 fichiers php
la ligne : $_POST['post'] = utf8_decode($_POST['post']);
doit être : $_POST['film'] = utf8_decode($_POST['film']);

Merci de cette remarque buz_16!! cela dit cela ne vient pas de ma librairie javascript (heureusement... lol) ca vient juste de l'exmple que j'ai codé a la va-vite.

Ben sinon si tu ne comprends pas tout et que tu arrives vraiment pas à comprendre alors n'hésite pas... je suis la pour ca... lol

@+

Commentaire de rubiks10 le 21/11/2006 18:52:19

Ben non tu peux faire des requetes sur plusieurs champs, le truc c'est qu'après lorsque tu veux rapatrier les valeurs des champs il te faut les imbriquer dans une propriété des balises <li>

Regarde par exemple l'exemple 3!!! C'est exactement le meme système que mon ancienne source : lorsque tu valides un choix ca te redirige avec la valeur de l'id du film et lorque tu valides sur aucun champs alors ca te redirige vers une recherche... bien sur sur mon exemple j'ai pas fais comme pour l'ancienne source un affichage du style : " film id = ????? etc..."

Mais regarde la barre d'adresse et tu véras!!! et donc pour voir comment je fais regarde la fonction " afterValidate " de l'exmple 3 et regarde aussi comment je récupère l'id du film!!!
en fait je fais comme ca : <li id="id du film">Titre du film</li>

Mais après c'est à toi de te faire ton propre fichier php qui va traiter les requetes
tu pourrais faire par exemple : <li id="champs1_champs2_champs3_champs4_etc...">Nom qui apparaitra dans ton autocomplétion</li>

et après dans ta propre fonction afterValidate tu peux récupérer tous les champs en faisant
"var champs = elementValide.split('_')"

Tu comprends ??

Commentaire de rubiks10 le 22/11/2006 18:12:33

Non tu n'as pas à avoir honte du tout!!!! Heureusement que tout le monde n'a pas les même connaissances en javascript et en n'importe quel langage d'ailleurs... sinon le site n'existerait pas!!!

Bon sinon cela est relativement long pour t'aider en passant par le forum
donc si tu veux voici mon msn : ocbslim@tiscali.fr
Comme cela tu pourras me demander ce que tu comprends pas et si jamais tu es motivé que je t'explique en détail le fonctionnement, et aussi pour reparler de ton idée de faire de l'autocomplétion sur 2 champs en même temps car j'ai toujours pas bien saisi exactement ton problème.

Voila donc si tu es motivé... n'hésites pas.

@+

Commentaire de tokyo le 18/12/2006 13:19:30

bonjour,

j'ai regardé ton code, c'est super !
cependant je me pose une question de béotien, comment faire pour faire apparaitre le résultat dans une liste déroulante ? Comment faire pour ne pas limiter le nombre de réponses sans que cela sature le système ?
exemple : si je fais une recherche sur a, par défaut j'obtiens (exemple 2) les dix premiers éléments contenant en première lettre a, comment l'utilisateur fait il pour accéder aux autres valeurs ?

si quelqu'un à une astuce pour un débutant ?

merci

tokyo

Commentaire de manuzed le 30/01/2007 11:13:00

Oui ok pour le principe même de l'autocompletion,
mais ou se trouve la variable qui détermine le nombre
de résultats affichés?

A+

Ps: un tres bon boulot!!!
Impressionant

Commentaire de FT24 le 27/02/2007 13:57:26

Super travail. Sous IE génial, par contre sous firefox imcompatible?

Merci Rubiks

Commentaire de FT24 le 27/02/2007 22:03:20

Rebonjour rubik, incompatible je ne sais pas. J'ai téléchargé ton code exemple (le zip du site), la recherche a chaque caractere est ok, mais si je clicke sur la réponse, celle-ci ne remplie pas le champ du formulaire. Ce qui n'est pas le cas sous IE (version 6).

Voila, voila. C'est sans doute une erreur de ma part. Je te remercie.

Franck.

Commentaire de rubiks10 le 28/02/2007 01:41:44

Salut FT24

En ce qui concerne la double recherche c'est à toi de creer ton propre fichier de traitement en php ou tout autre langage serveur. Les fichiers php de traitement que j'ai inclus sont à titre d'exemples pour faire fonctionner l'exemple de la liste de films.

Si tu as lu la doc fournie j'ai indiquer que la seule chose à absolument faire c'est de renvoyer du code html sous forme de liste UL LI avec les LI étant les propositions. Après la requête doit être faite exprès pour l'utilisation que tu veux et donc tu peux récupérer tout ce que tu veux.

En ce qui concerne ton problème avec FF c'est très bizarre car personne n'a eu de problème jusqu'à présent avec les versions 1.5 ou 2.0 et plus. Peut-être que tu as une version antérieure mais meme une version antérieure devrait fonctionner. Tu devrais essayer de mettre à jour FF et vérifier... mais vraiment bizarre.

Voilà

Commentaire de mussara le 01/03/2007 11:04:45

bonjour rubiks10

merci pour toutes les explications et codes que tu nous proposes. je commence à un peu mieux comprendre ce mécanisme que j'ai découvert hier... et de permettre d'éviter les listes de centaines d'éléments c'est génial...

par contre je me pose quelques questions pour adapter ton code à mon appli... et surtout qu'en est il par rapport à la soumission du formulaire...
je m'explique...
j'ai déjà un formulaire actuellement (avec malheureusement des select qui font apparaitre des centaines de lignes...). je compte donc remplacer mes select par ton script d'autocompletion.
à la saisie des lettres et lorsqu'on clique sur le mot choisi , est ce que le formulaire est soumis ou pas?
je souhaite que non, car la sélection d'un mot n'est qu'une partie de mon form, et je souhaite qu'il reste 'soumis' que lorsque l'utilisateur clique sur le bouton de validation...

merci en tous les cas

Commentaire de rubiks10 le 01/03/2007 20:31:53

Salut MUSSARA

Oui tu as donc remarqué que je n'utilise pas de formulaire et que la soumission d'un formulaire peut se faire par javascript en redefinissant la méthode afterValidate.

Tu peux d'ailleurs regarder les exemples que je fournis avec la doc pour comprendre comment et l'intérêt de pouvoir redéfinir cette méthode à sa guise.

En ce qui concerne l'id j'ai expliqué une méthode et l'ai implémenté en exemple dans l'exemple 3 que je vous ai fournis. (si on valide un film alors cela nous redirige vers une page avec son id en parametre) et pour comprendre comment je fais je te conseille de regarder dans le fichier de génération en php (la méthode et d'insérer l'id dans l'id de la balise LI) enfin tu comprendras mieux en analysant mon code dans le fichier PHP ainsi que la méthode afterValidate de l'exemple 3 (a voir dans le fichier HTML)

Voilà il n'y a rien de compliqué mais si jamais tu bloques n'hésites pas.

Bonne prog

Commentaire de rubiks10 le 02/03/2007 00:03:25

Oui donc pour te donner un autre exemple :

Dans le fichier php qui génère la liste il faut que tu affectes un id à chaque proposition representée par une LI.

Puis il faut que tu redéfinisses la fonction afterValidate par exemple :
   afterValidate: function(element,updateElement,elementValide,text){
      if (elementValide) { // Si on a validé un choix
        element.value = text; // Remplir le champs texte par le choix
var id = elementValide.id; // Recupérer l'id de la LI (on en fait ce que l'on veut...)
        // Tu peux donc affecter une Input Hidden avec la variable id etc...
      }
   }

La redéfinition de la fonction se fait dans le sous objets Extra de l'objet options comme l'exemple 3 fournis.

Voilà je pense que cette fois tu as compris.
@+
},

Commentaire de tokyo le 06/03/2007 12:58:57

bonjour,

je ne maitrise pas trop javascript.

j'ai intégré le script dans mon appli tout fonctionne bien.
cependant j'aurais aimé rendre la saisie insensible aux accents, comme c'est le cas pour la casse.

voici ce que j'ai fais,

-dans ma liste (données qui viennent d'une bd), je la débarasse de ses accents et je mets en majuscule, donc le contenu de la liste s'affiche bien en majuscule et sans accents (LocalArray)

j'ai crée une fonction qui se lance sur la saisie d'une lettre dans le champ input (exemple2),
cette fonction me permet de remplacer les lettres saisies et de les substituer ainsi si j'entre un é, il est trasformé en E.
cela fonctionne bien sur la première lettre, je peux taper e,é, è, E indiféremment et j'obtiens biens mes éléments qui figure dans ma bd.
par contre , imaginons que j'ai dans ma bd le terme electrode enrobée.
je transforme cela en ELECTRODE ENROBEE pour que cela apparaisse dans ma liste,
si je tape :
é ou e, j'obtiens bien mon ELECTRODE ENROBEE, si je tape enrobee, pas de pb je l'obtients toujours. si je tapes enrobée, là je n'ai plus rien dans ma liste.

qu'est ce j'ai loupé, peut être faut il jouer avec exemple_update ? je vois pas comment...
est-ce faisable ?

merci d'avance si vous avez une idée ?

tokyo

Commentaire de FT24 le 07/03/2007 11:24:02

Est ce un pb de chemin relatif ?

Commentaire de mussara le 07/03/2007 16:53:52

bonjour

j'ai de nouveau un petit souci:

lorsque l'utilisateur a déjà saisi un mot après sélection dans le formulaire (en version AJAX)  s'il retourne sur la page et qu'il veut saisir les mêmes lettres, il a 2 listes de choix qui se superposent (celle gérée par l'autocomplétion + celle qui garde en mémoire ce que l'utisateur a tapé)

est ce dû à un problème de codage? on peut le solutionner?

je ne sais pas trop quoi faire car du coup les 2 listes se superposent...

merci de votre aide

jp

Commentaire de FT24 le 08/03/2007 06:54:25

Salut RUBIK,
APACHE 2, PHP 4.4.0 (virtual directory a OFF), MySql 4.x.
Sous windows ok (easyphp 1.8 virtual directory a On.
Je vais vérifier la casse des noms des répertoires et fichier.

Merci RUBIK

Franck.

Commentaire de tokyo le 13/03/2007 13:27:20

bonjour,

personne n'a d'idée ou de piste sur mon message du 6/03 ?
j'avoue m'être bien trituré les neurones, je ne comprends pas pourquoi j'arrive à rendre insensible aux accents sur la première lettre et pas sur les autres....

à l'aide...

tokyo

Commentaire de tokyo le 14/03/2007 17:02:27

bonjour rubik,

tout d'abord, merci de ta réponse.
en fait je voudrais que la saisie soit insensible aux accents comme c'est possible pour la casse.
mais je ne vois pas comment faire.
c'est pour cela que j'essayais de transformer les caractères saisis, mais effectivment cela ne peut pas marcher.

il faudrait en fait enrichir ta librairie avec une possibilité supplémentaire genre ignorerAccents, c'est cela ?

tokyo

Commentaire de benb82 le 26/03/2007 01:44:52

Salut,

Je ne sais pas si je suis le seul à avoir ce soucis, mais les touches KEY_UP, KEU_DOWN, KEY_PAGEUP et KEY_PAGEDOWN ne répondent pas sous FF. Tout ce passe bien sur IE. En remplacant KEY_UP par KEY_LEFT dans le fichier Autocompleteur_lib.js (ligne 270 environ), il se passe bien se qui devrait se passer avec la fleche du haut.

J'utilise bien la derniere version de FF. Pourrais-tu m'apporter un element de reponse. Merci

Commentaire de braouazou le 27/03/2007 18:23:29

Salut,

Je fais des tests avec ta bibliothèque qui est très bien pensée. J'ai juste un petit souci d'affichage avec Internet Explorer lors de l'affichage de la liste d'autocompletion.
Le div semble masquer du texte qui se trouve au dessus de l'input. Ce problème n'apparait pas sous FF (je n'ai testé qu'avec IE 6, je n'ai pas de machines windows à disposition et le progiciel que je développe sera majoritairement utilisé sous IE).

Je peux au besoin faire une démo.

Julien

Commentaire de tokyo le 04/04/2007 10:58:10

bonjour rubik,

la suite de mes aventures , j'ai testé en passant par le php j'arrive à mes fins concernant mon problème d'accents,

par contre je n'ai plus accès aux recherches même à l'intérieur des chaînes (ex: on recherche 'te' => raquette convient). c'est pour cela que j'utilisais le mode local.....

y a t-il moyen d'implémenter la recherche à l'intérieur des chaines en mode ajax ?

d'avance merci de tes réponses

cordialement

tokyo

Commentaire de rubiks10 le 04/04/2007 16:07:09

Salut Tokyo

Pour les recherches à l'intérieur des chaines en mode Ajax c'est à toi de créer ta propre requête MySQL.

par exemple pour une recherche normal : LIKE 'blabla%'
par exemple pour une recherche à l'intérieur : LIKE '%blabla%'
La recherche intérieure en mode Ajax se fait manuellement et pas par une option

Voilà

Commentaire de sesramdeux le 11/04/2007 15:34:32

Bonjour Rubik

Très bon script.
Toutefois, j'ai beau relire et relire les explications que tu donnes concernant la récupération de l'ID dans un <input type="hidden"...>, j'obtiens désespérement un beau "0".
Dans le fichier php (dans ton exemple film_sans_image.php), j'ai bien les champs nécessaires dans la clause SELECT ainsi que dans l'array Response. Je reprends l'ID dans l'id du <li>.

Par contre, je coince ici : comment je récupère une valeur en javascript vers une valeur dans le hidden
afterValidate: function(element,updateElement,elementValide,text){

      if (elementValide) { // Si on a validé un choix
        element.value = text; // Remplir le champs texte par le choix
var id = elementValide.IDLoc; // Recupérer l'id de la LI (on en fait ce que l'on veut...)
        // Tu peux donc affecter une Input Hidden avec la variable id etc...
      }
   },

Merci

Commentaire de sesramdeux le 13/04/2007 08:07:42

Décidément, non, je n'y arrive pas. Il y a quelque chose que je dois faire de travers.
Voici le code (un peu adapté) dans le fichier php et dans le fichier html.  Je récupère bien la valeur localité, mais jamais l'id. Merci.

1. dans film_sans_image.php
///////////////
                                                        SELECT DISTINCT
                                                                                IDLoc as id,
                                                                                txtLocalite
                                                        FROM
                                                                                tbllocalites
                                                        WHERE
                                                                                txtLocalite LIKE '".$_POST['localite']."%'
                                                        ORDER BY
                                                                                txtLocalite ASC
                                                        LIMIT
                                                                                ".$_POST['limit']."
                                        ")
                                        or die(mysql_error());

dbClose();

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////EXTRACTION DE LA REQUETE ///////////////////////////////////////////
$response = array();
while ( $result = MYSQL_FETCH_ARRAY($query,MYSQL_ASSOC) )
{
        $response[] = array (
                                                        'id' => $result['id'],
                                                        'txtLocalite' => $result['txtLocalite']
                                                );
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////// CREATION DE LA CHAINE DE CARACTERES ENVOYEE ////////////////////////////////////
$return = '<ul class="films">';
for($i=0;$i<count($response);$i++)
{
        $return .= '<li id="id_'.$response[$i]['id'].'" class="film">
                                        <div class="titre">'.$response[$i]['txtLocalite'].'</div>
                                </li>';
}
$return .= '</ul>';
//////////////

2. Dans le fichier ".html"

...
                                                        <script type="text/javascript">
                                                                new AutoCompleteur('IDLoc', 'IDLoc_update', '<?php echo $dir_inc?>/autocompletion/traitement_php/film_sans_image.php', {
                                                                        Global: {
                                                                                nbrMaxItem: 100,
                                                                                nbrCharsStart: 3,
                                                                                classToIgnore: ' '
                                                                        },
                                                                        Ajax: {
                                                                                paramName: 'localite'
                                                                        },
                                                                        Extra: {
afterValidate: function(element,updateElement,elementValide,text){
      if (elementValide) { // Si on a validé un choix
        element.value = text; // Remplir le champs texte par le choix
     var id=elementValide.id; // Recupérer l'id de la LI (on en fait ce que l'on veut...)
        // Tu peux donc affecter une Input Hidden avec la variable id etc...
      }
   },

                                                                                openEffect: 'blind',
                                                                                hideEffect: 'slide'
                                                                        }
                                                                });
                                                        </script>
                                                        <input  type="hidden" name="id" value=""/>
                                                </div>

Commentaire de nihaoma le 16/04/2007 09:09:31

pardon, je voulais dire "ton script est très bien!"

Commentaire de plefebvr_fr le 25/05/2007 12:49:23

Bonjour,

Et bravo pour ce code d'autocompletion, j'en ai vu pas mal en cherchant sur la toile mais soit "trop lourd", soit avec des erreurs..

Bref, le plus court est souvent le meilleur !!

J'ai une petite question tout de même (surement simplissime mais pas pour moi ;o)), je cherche à récupérer la valeur du premier champ "id" afin de renseigner d'autres champs du formulaire sans avoir à ré-interroger la base,

Exemple:
<li id="filmID_Action_13/05/2006" class="film">
<div class="titre">La bataille des planètes</div>
</li>

Pour remplir les champs du formulaires comme ça :

element.value = collectedText;
document.getElementById(\'typedefilm\').value = 'Action';
document.getElementById(\'dateachat\').value = '13/05/2006';

Mais il y a surement plus simple .. ;o)

Merci beaucoup,
Philippe

Commentaire de bafcomp le 30/05/2007 17:55:46

rubiks10 je te salut pour se que tu as fait et pour repondre a toute ces qustion, il nous faut juste une dizaine de perssone comme toi et y aura plus d ignorant informatique
merci a mon nom et merci au nom de tous se que tu as aider je suis vraiment fiere de toi

Commentaire de rubiks10 le 10/06/2007 21:50:09

Salut APALIGOT

Est-ce qu'au moins la liste s'affiche ?
Est-ce que tu as créé toi même un fichier de réponse serveur ou as-tu utilisé le mien et si tu as utilisé le mien qu'as-tu modifié dedans ?

Plusieurs personnes ont eu le même problème sur FireFox mais j'avais résolu le problème depuis (voir commentaire des mises à jour). J'utilise ma source dans de nombreux projets et je n'ai jamais eu de problèmes par la suite sur tous les navigateurs.

Donc si tu me dis que mon exemple fonctionne parfaitement cela ne vient pas de FireFox mais d'un problème dans ton adaptation de ma source. Mais quoi... réponds aux questions précédentes ça m'orientera pour résoudre le problème.

Commentaire de gfpl le 21/06/2007 16:45:16

le meme avec
http://all-dog.eu/auth1/ajax/auto3/

au fait pq ca ca ne marche pas ?
[code]
<?php

$sql1 = "SELECT * FROM cp_ville";
$result1 = mysql_query($sql1);
  $num1 = mysql_num_rows($result1);
  if($num1 == 0 ) { echo'erreur mauvais code postale';return false;}

else{
?>
  
<script type="text/javascript">
var LocalArray = ['!',':',';','?',<?php for($i=0; $i<$num1; $i++) {
  $ville = mysql_result($result1, $i, "cp_ville.vil_nom"); echo $ville; }
      mysql_query($sql1) or die($sql1);
  }?>'achro;atopsie'];
</script>
[/code]

Commentaire de gfpl le 04/07/2007 15:47:45

en effet la ca marche et je n ai rien fait de sepcial mais bon j ai refais un upload de mes source et ca a marche comme il faut il y avait peut etre un fichier non compet que j avait upper

sinon oui c est utres bon code j ai juste un petit souci si tu sait me dire ou c est
quand on selectionne une ville il retourne une url genre id=id4568 voila j ai un id en trop j aimerais voir id=456855... pour recupere les variable...

Commentaire de plefebvr_fr le 25/07/2007 09:45:23

Salut Rubiks,

Merci pour le script !!

Mais j'ai une petite question, comment empêcher la requête ajax lorsqu'un choix a été effectué (via enter ou click par exemple) car 2 requêtes au minimum sont envoyées au serveur et la deuxième ne sert à rien,

Exemple, dans la démo fournie :
1. Je tape b dans le premier champ => 1 requête ajax (like 'b%')
2. Je choisi une des valeurs => Une requête ajax est envoyée au serveur avec le résultat (like 'Bad Company%')

Voici la trace mysql :
070725  9:42:43       16 Connect     root@localhost on
         16 Init DB     autocompletion
         16 Query       SELECT DISTINCT
                    id,
                    titre
              FROM
                    autocompletion_exemple
              WHERE
                    titre LIKE 'b%'
              ORDER BY
                    titre ASC
              LIMIT
                    5
         16 Quit      
070725  9:42:46       17 Connect     root@localhost on
         17 Init DB     autocompletion
         17 Query       SELECT DISTINCT
                    id,
                    titre
              FROM
                    autocompletion_exemple
              WHERE
                    titre LIKE 'Bad Company%'
              ORDER BY
                    titre ASC
              LIMIT
                    5
         17 Quit      

Merci bcp,
Pl

Commentaire de plefebvr_fr le 28/07/2007 16:10:28

Salut Rubiks,

Je ne pense pas que ça soit le cas uniquement chez moi .. car j'ai utilisé la démo qui est fournie donc le code n'a pas été modifié du tout.

On peut le vérifier en activant la trace dans mysql comme cela puis en redémarrant mysql :

Exemple moi avec wamp, ajouter la variable log dans le block [wampmysqld] :
[wampmysqld]
log=C:/Server/Wamp/logs/queries.log

Pour un mysql classique :
[mysqld]
log=C:/Server/Wamp/logs/queries.log

Et franchement, je ne suis pas d'accord sur le fait que ce ne soit pas un problème car le but est d'avoir un code optimisé, pas de solliciter le serveur inutilement (sauf si le nombre de sessions est limité bien entendu ou qu'il s'agit d'un serveur de test)

Voilà, si quelqu'un peut me confirmer que je ne suis pas le seul ou a une solution, je suis preneur ;o))

Merci & @+,
PL

Commentaire de zouzino le 03/12/2007 17:21:57

Salut Rubiks10,
C'est un très bon code mais j'ai deux questions puisque je suis pas expert en javascript et ajax:
1- Comment faire si je veux que le script m'affiche tjs des autocompletions si je separe les mots disons par /. Une fois je tape / et je retape un charactere je veux que le script m'affiche des propositions commencant par ce charactere.

2- Quelle fonction me permet une fois que je clique sur un mot propose d'afficher disons dans une autre div des resultats relies a ce mot?

Merci d'avance et bonne continuation

Commentaire de zapolo le 14/10/2009 15:38:14

Bonjour RUBIKS10,

Je viens de découvrir ton script qui vient me sauver la vie. Encore merci.
cependant, j'ai un souci.
J'ai un peu modifié l'affichage des résultats et ça fonctionne parfaitement. je souhaiterais pouvoir atteindre directement une page en cliquant sur un des résultats retournés par la recherche.
Merci

Commentaire de squatman972 le 03/02/2010 03:56:23

PS2: Ca marche avec les exemples en ligne mais pas en local :s