Une autocompletion avancée en AJAX

Par j0k le lundi 07 août 2006, 11:35 dans développement - 14284 vues

Ca faisait quelques jours que les nouvelles se faisaient rares. C'est tout simplement parce que je préparais un nouveau tutoriel en AJAX.
Je l'ai mis en application au taff, du coup je me suis dit que cela pourrai certainement profiter à certains, Alk en premier :)

Vous avez certainement déjà mis en place une autocompletion en AJAX via la librairie script.aculo.us. Ce n'est globalement pas très compliqué même si l'exemple présent sur la page de démo de leur site ne vous permet pas de le faire directement ... bien dommage d'ailleurs.

Certes NiKo a publié sur son blog un billet intéressant qui permet de le mettre en place mais cet exemple vous permettra d'installer une autocompletion "basique" pour un moteur de recherche par exemple. Cependant il est souvent intéressant de mettre de l'autocompletion ailleurs que sur un moteur de recherche !

A lire au plus vite : Autocompletion avancée en AJAX ;)

41 commentaires en tout !

1. j0k le lundi 07 août 2006, 01:59 #permalien
j0k

Analyste développeur dans une web agency :) Mais pour l'instant c'est un stage.

2. Anonymous le lundi 07 août 2006, 03:57 #permalien
Anonymous

no jok, un fût si tu veux ^^

3. Anonymous le lundi 07 août 2006, 12:20 #permalien
Anonymous

good job, for good tuto ! :respect: :thx: fais moi pensez a t'offrir un verre la prochaine fois qu'on se voit :chin:

4. j0k le lundi 07 août 2006, 12:34 #permalien
j0k

Juste un ? Pfff LOL

5. Sw3eT le lundi 07 août 2006, 12:57 #permalien
Sw3eT

"Je l'ai mis en application au taff"
On pourrait savoir ce que tu fait comme taff ? si c'est pas indiscret :p

6. j0k le mercredi 09 août 2006, 04:32 #permalien
j0k

Bizarre l'histoire du http. Sinon pour le nom sur la même ligne que la balise, je le précise déjà ;)

7. Anonymous le mercredi 09 août 2006, 05:33 #permalien
Anonymous

dans ton exemple ou est situé le 'autocompletion.php' par rapport au fichier principal ? :)

8. j0k le mercredi 09 août 2006, 08:22 #permalien
j0k

autocompletion.php est le fichier principal :)

9. Anonymous le mercredi 09 août 2006, 12:14 #permalien
Anonymous

Je n'arrive pas à mettre en place ton exemple, quand je tape une lettre dans le champ, un chargement s'effectue bien mais rien ne s'affiche... pour l'instant j'ai mis une liste statique dans autocompletion.php
Quand on fai appel a 'autocompletion.php' il doit bien se trouver dans le meme répertoire que le script php qu'on execute ?

Le truc que je ne comprend pas c'est que ton fichier exemple s'apelle deja autocompletion.php donc on se situe celui qui te sert a générer les resultats de l'autocompletion ?

10. Anonymous le mercredi 09 août 2006, 12:19 #permalien
Anonymous

Mon code :
Fichier principal :

**Code ** ``               <td>                <label for="chef">Chef : </label>                <input type="input" name="chef" id="chef" value="" />                <div class="update" id="chef_update"></div>                <input type="hidden" name="chef_id" id="chef_id" value="" />               </td>                 </tr>

<script language="javascript">

new Ajax.Autocompleter(    'chef',    'chef_update',    'autocompletion.php',    {       method: 'post',       paramName: 'chef',       afterUpdateElement: ac_return    } );

function ac_return(field, item) {         // on met en place l'expression régulière         var regex = new RegExp('[0123456789]*-idcache', 'i');         // on l'applique au contenu         var nomimage = regex.exec($(item).innerHTML);         //on récupère l'id         id = nomimage[0].replace('idcache', '');         // et on l'affecte au champ caché         $(field.name+'_id').value = id; }

</script>``

Mon autocompletion.php statique :

**Code ** `` <?php /*  * PHP file that generates the autocompletion dataset  *  */

 if(isset($_POST['chef']))  {    header('Content-type: text/html; charset=iso-8859-1');

echo '<ul class="contacts">        <li class="contact">          <span class="informal" style="display:none">816-idcache</span>          <div class="nom">Vernet</div>            <div class="prenom">                 <span class="informal">Loic</span>            </div>        </li>      </ul>';

} ?>

``

11. Anonymous le mercredi 09 août 2006, 12:53 #permalien
Anonymous

Bon ca marche, j'ai mis le lien http:// vers le fichier autocompletion.php sinon ca ne marchait pas. Attention a bien mettre la balise nom sur la ligne du li généré sinon on a des tabulations au lieu du nom a afficher :P
mici

12. Anonymous le mardi 15 août 2006, 05:28 #permalien
Anonymous

Bonjour, Peut on voir le script ajax autocompletion ? Parce que débutant, j'ai du mal a suivre mais j'aimerais bien faire un jolie effet.

13. jaguijaguar le mercredi 16 août 2006, 02:56 #permalien
jaguijaguar

Où est la partie PHP qui met en liste les données dans ton exemple, celle qui ressemble à ça : **Code ** ``<? if(isset($_POST['cotis'])){         header('Content-type: text/html; charset=iso-8859-1');         // on inclut la connexion         require_once('connexion.php');

        // on fait la requête         $sql = "SELECT nom, prenom, refemploye FROM employe                 WHERE nom LIKE '%".$_POST['cotis']."%'";         $req = mysql_query($sql);

        $i = 0;         echo '<ul class="contacts">';         // on boucle sur tous les éléments         while($autoCompletion = mysql_fetch_assoc($req)){                 echo ' <li class="contact"><div class="nom">'.$autoCompletion['nom'].'</div>         <div class="prenom"><span class="informal">'.$autoCompletion['prenom'].'</span></div> </li>';       echo '<span class="informal" style="display:none">'.$autoCompletion['refemploye'].'-idcache</span>';                 // on s'arrête s'il y en a trop                 if (++$i >= 10)                         die('<li>...</li></ul>');         }         echo '</ul>';                die(); } ?> `` Après plusieurs tentatives, je dois dire que j'ai pas réussi à mettre en place mon autocompletion. Si qqu'un pouvait m'aider..

14. j0k le mercredi 16 août 2006, 03:19 #permalien
j0k

C'est la partie 5 du tuto ... C'est dans autocompletion.php. Donne un lien pour la tester ton autocompletion.

15. jaguijaguar le mercredi 16 août 2006, 05:09 #permalien
jaguijaguar

non, je parlais pas de ton tuto, mais de ton exemple a cette adresse : [http://www.j0k3r.net/exemples/ajax/autocompletion.php](http://www.j0k3r.net/exemples/ajax/autocompletion.php "Lien")

sinon moi mon traitement c'est celui que j'ai mis avant et que j'appelle autocompletion.php et mon formulaire c'est ca (il s'appelle index.php par exple) (et pour moi il est quasi pareil que ds ton tuto) : **Code ** <form method="post">         <label for="chef">Cotisant : </label>         <input type="input" name="cotis" id="cotis" value="" />         <div class="update" id="cotis_update"></div>         <input type="hidden" name="cotis_id" id="cotis_id" value="" ><br/>        <input type="submit" name="action" value="Ajouter" >  </form> <script type="text/javascript"> new Ajax.Autocompleter ('cotis',                   'cotis_update',                   'autocompletion.php',                   {                      method: 'post',                      paramName: 'cotis',                      afterUpdateElement: ac_return                   }); </script> <script type="text/javascript"> function ac_return(field, item){         // on met en place l'expression régulière         var regex = new RegExp('[0123456789]*-idcache', 'i');         // on l'applique au contenu         var nomimage = regex.exec($(item).innerHTML);         //on récupère l'id         id = nomimage[0].replace('-idcache', '');         // et on l'affecte au champ caché         $(field.name+'_id').value = id; } </script>

16. j0k le mercredi 16 août 2006, 05:40 #permalien
j0k

Et au niveau du CSS ?

17. jaguijaguar le mercredi 16 août 2006, 05:44 #permalien
jaguijaguar

Pour l'instant j'ai rien changé ds les styles, j'ai remis pareil que toi

18. j0k le mercredi 16 août 2006, 05:57 #permalien
j0k

T'as pas un lien pour tester en live ?

19. j0k le mercredi 16 août 2006, 10:06 #permalien
j0k

En téléchargement ? Je n'avais pas prévu de le mettre, je le ferai ce soir ;)

20. jaguijaguar le jeudi 17 août 2006, 02:11 #permalien
jaguijaguar

Bon ok tu vas me traiter, mais c'est un lien que je croyais bon et qui ne l'étais pas. En tout cas merci pour ta dispo et pour firebug

21. jaguijaguar le jeudi 17 août 2006, 10:22 #permalien
jaguijaguar

[http://jeandormesson.ifrance.com/](http://jeandormesson.ifrance.com/ "Lien")
voila, pour les noms, j'ai plusieurs qui commencent par "lam" ou "dup" la page concernée est la page d'index.

22. j0k le jeudi 17 août 2006, 12:07 #permalien
j0k

Je te conseille d'utiliser la très célèbre extension firefox Firebug qui te permet de voir les transits des requetes en AJAX. Mais ce qui est important, dans ton cas, c'est ce que retourne la requete. On voit ici qu'elle retourne tout plein de "merde" (certainement du à ifrance) mais aussi des erreurs PHP :
: > <script language="Javascript" type="text/javascript"> <!-- var d=new Date; rnd=d.getDay()+'-'+d.getHours(); var b=(''+location.hostname).split('.'); d=2; if(b[b.length-d+1]=='') d=3; h='web.'+b[b.length-d]+'.'+b[b.length-d+1]; //document.write('<sc'+'ript src="http://'+h+'/perso/js.php?'+rnd+'"><'+'/sc'+'ript>'); document.write('<sc'+'ript src="http://js-perso.ifrance.com/js.php?'+rnd+'"><'+'/sc'+'ript>'); // --> </script> <br /> <b>Warning</b>: main(connexion.php): failed to open stream: No such file or directory in <b>/www/sites/1/ifrance.com/j/e/jeandormesson/site/autocompletion.php</b> on line <b>5</b><br /> <br /> <b>Fatal error</b>: main(): Failed opening required 'connexion.php' (include_path='.:/www/usr/lib/php') in <b>/www/sites/1/ifrance.com/j/e/jeandormesson/site/autocompletion.php</b> on line <b>5</b><br /> <script type="text/javascript" src="http://js-perso.ifrance.com/weborama.js"></script> <script type="text/javascript"> <!-- function r() { top.parent.document.body.rows = "88,"; } if (top!=self) window.setInterval("r()", 2000); if (top != self) { top.document.title = document.title; document.body.onunload=top.frames[0].location.href=p; rnd=Math.floor(Math.random()1000); var b=(''+location.hostname).split('.'); s=b[b.length-3] + '.' + b[b.length-2] + '.' +b[b.length-1]; image_stat = new Image(); image_stat.src = 'http://82.196.5.35/i.php?s=' + s + '&' + rnd; } --> </script>

23. Anonymous le jeudi 31 août 2006, 09:39 #permalien
Anonymous

Cela fait 2jours que j'essaie de mettre ce srcipt en marche, mais je n'y arrive pas.
Je suis le tuto a la lettre.

ET quand je lance IE et ma page, j'ai deja uen erreur en bas avec le java qui me dit objet attendu a cet ligne :

new Ajax.Autocompleter ('chef',

Je ne comprend pas pourquoi et du coup quand je tape un nom dans mon input rien ne s'affiche.

24. Anonymous le jeudi 31 août 2006, 09:43 #permalien
Anonymous

JE rajoute sur Firefox c'est a la ligne :
afterUpdateElement: ac_return

25. j0k le jeudi 31 août 2006, 09:59 #permalien
j0k

On peut voir ton code ou mieux une page exécutant ton code ?

26. Anonymous le jeudi 31 août 2006, 10:37 #permalien
Anonymous

Je suis sur easy php pour l'instant donc pa de demo en ligne désolé.
Voici mon code :

**Code ** `` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Une autocompletion avancée en AJAX</title> <script type="text/javascript" src="src/prototype.js"></script> <script type="text/javascript" src="src/scriptaculous.js"></script> <script type="text/javascript" src="src/autocompletion.js"></script> <style type="text/css"> body{    font-family: Verdana, Arial, Helvetica, sans-serif;    text-align: justify;    font-size: 12px;    color: #565656; }

img {     border: none; }

ul {    list-style: none;    margin: 0;    padding: 0; } /* Autocompletion */ .update{    position:absolute;    width:250px;    background-color:white;    border:1px solid #888;    margin:0px;    padding:0px; }

ul.contacts  {    list-style-type: none;    margin:0px;    padding:0px;    text-align: left; } ul.contacts li.selected { background-color: #ffb; cursor: pointer; } li.contact {    list-style-type: none;    display:block;    margin:0;    padding:2px;    height:32px; } li.contact div.image {    float:left;    width:32px;    height:32px;    margin-right:8px; } li.contact div.nom {    font-weight:bold;    font-size:12px;    line-height:1.2em; } </style> </head> <body>

<form action="?" method="post" onsubmit="return false;">    <label for="chef">Chef : </label>    <input type="input" name="chef" id="chef" value="" />    <div class="update" id="chef_update"></div>    <input type="hidden" name="chef_id" id="chef_id" value="" /> </form> <br/> Numéro de la personne avec son nom : <span id="chef_log"></span>

<script type="text/javascript"> function ac_return(field, item){         // on met en place l'expression régulière         var regex = new RegExp('[0123456789]*-idcache', 'i');         // on l'applique au contenu         var nomimage = regex.exec($(item).innerHTML);         //on récupère l'id         id = nomimage[0].replace('-idcache', '');         // et on l'affecte au champ caché         $(field.name+'_id').value = id; } </script>

<script type="text/javascript"> new Ajax.Autocompleter ('chef',                   'chef_update',                   'autocompletion.php',                   {                      method: 'post',                      paramName: 'chef',                      afterUpdateElement: ac_return                   }); </script>

</body> </html> ``

**Code ** `` <?php if(isset($_POST[['chef'])){         header('Content-type: text/html; charset=iso-8859-1');         // on inclut la connexion         require_once('connexion.php');

      mysql_select_db($database_openDB, $openDB);         // on fait la requête         $sql = "SELECT nom, prenom, id FROM identifiant WHERE nom LIKE '".$_POST[['chef']."%'";         $req = mysql_query($sql, $openDB);

        $i = 0;         echo '<ul class="contacts">';         // on boucle sur tous les éléments         while($autoCompletion = mysql_fetch_assoc($req)){                 echo ' <li class="contact"><div class="image"><img src="images/'.$autoCompletion['id'].'-mini.jpg"/></div><div class="nom">'.$autoCompletion['nom'].'</div>         <div class="prenom">                 <span class="prenom">'.$autoCompletion['prenom'].'</span>         </div> </li>';                 // on s'arrête s’il y en a trop                 if (++$i >= 10)                         die('<li>...</li></ul>');         }         echo '</ul>';         die(); } ?> ``

Bien sur ma connection a ma base de données fonctionne et ma requete egalement, je les ai testées sur une autre pages.

Les fichiers prototype.js, scriptaculous.js, autocompletion.js sont bien a leur place dans le dossier src.

Par contre j'aimerai savori ce que contient le fichier autocomplion.js normalement?

27. j0k le jeudi 31 août 2006, 11:00 #permalien
j0k

**Code ** $_POST[['chef'] Remplace par **Code ** $_POST['chef']

Le fichier autocompletion contient juste la fonction ac_return : http://www.j0k3r.net/exemples/ajax/lib/autocompletion.js

28. Anonymous le jeudi 31 août 2006, 11:22 #permalien
Anonymous

cela fonctione parfaitement sous firefox, mais sous IE j'ai toujours des problemes. Mon champ caché ne se remplit pas.

29. Anonymous le jeudi 31 août 2006, 11:28 #permalien
Anonymous

Ok désolé une petite erreur de code idmini au lieu de idcache. cela focntionne parfaitement.

30. Anonymous le jeudi 31 août 2006, 12:22 #permalien
Anonymous

Ce qu'il y a de bien en plus, c'est qu'on peut en mettre plusieur par page et ca fonctionne tres bien.

31. j0k le jeudi 31 août 2006, 12:32 #permalien
j0k

Tant mieux :zou:

32. Anonymous le vendredi 01 septembre 2006, 02:35 #permalien
Anonymous

Nouvelle petite question :
J'aurai voulu accélérer le temp d'ouverture du menu de suggestion qui s'ouvre ?

J'ai cru voir dans toutes mes recherches une valeur qui pouvait faire cela je pense, mais je ne la trouve plus.

33. j0k le vendredi 01 septembre 2006, 03:01 #permalien
j0k

Essai avec duration:0.5 (chiffre en seconde) dans les options d'Autocompleter, mais je suis sur de rien

34. cotp le mercredi 27 septembre 2006, 06:05 #permalien
cotp

j0k3r_n0ir, J'ai du mal à mettre tout ça en place. Serait-il possible que tu mettes en téléchargement l'exemple de ton tuto...

Je suis sous Easy Php, j'ai bien lié avec ma base de données, mais quand je rentre une lettre la boite de dialogue reste desesperemment vide...

Cotp

35. j0k le mercredi 27 septembre 2006, 08:06 #permalien
j0k

Ah oui il faut que je le fasse, je l'ai dis plus tôt dans le post, je vais faire ce soir !

36. j0k le mercredi 27 septembre 2006, 09:41 #permalien
j0k

Voilà qui est fait, tout en bas : http://www.j0k3r.net/ajax-une-autocompletion-avancee-en-ajax-6.html

37. cotp le jeudi 28 septembre 2006, 01:05 #permalien
cotp

Salut Joker, Merci pour ton lien en téléchargrement J'ai installé la base personne copié les fichier et j'ai fais un test en local sou easy php ça marche ;) Maintenant j'ai essayé de faire marché le script avec ma propre base. Et là ça buggue :( J'ai remplacé dans les 2 select, la base par ma base, mes champs sont les memes nom et prenom juste id qui pour moi est numid, je l'ai donc changé dans le select Et je n'ai pas de champ photo. Quand je lance la page, en fait j'ai une liste de noms de realisateurs qui s'affiche sans le prenom et quand j'essaye de taper dans la case...: RIEN NOTHING DEAD :(

Une idée ?

38. cotp le vendredi 29 septembre 2006, 03:13 #permalien
cotp

j0k3r_n0ir : > Tu utilises donc le champ idcache?

Aîe je suis désolé je ne comprends pas ta question :oops: Que veux-tu dire par idcache ?

39. j0k le vendredi 29 septembre 2006, 05:56 #permalien
j0k

Relis mon article, tu vera que si tu n'utilise pas les images il faut que tu passes par un champ caché que j'ai appelé idcache.

40. j0k le vendredi 29 septembre 2006, 12:53 #permalien
j0k

Tu utilises donc le champ idcache?

41. fash le lundi 25 juin 2012, 14:00 #permalien
fash

SE faisait rare...

(lien H.S.)

Pensez à vous inscrire !

  • C'est rapide
  • Utiliser votre compte Facebook
  • Ou votre Open ID
Laisser un commentaire





Catégories


Tags


Liens