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'
                                                                        }