mars 25, 2010 2

jQuery ajax autocomplete : amélioration en libre service

By in Code Source, Javascript

Je bosse quasiment à 100% avec jQuery, pour, entre autre, la richesse des plugins existants, richesse évitant de réinventer la roue sans cesse.

Et l’un de mes plugins clef c’est le ajax autocomplete de chez DEVBRIDGE, accessible sur leur site.

Mais ce plugin, à mon gout, avait 1 défaut : lorsque la requête ajax est lancée, aucun signal visuel n’est émis pour signaler à l’utilisateur que “ca mouline”.

Grave erreur/handicap en matière d’expérience utilisateur.

J’ai donc modifié un peu le plugin, en lui ajoutant une option : loaderImg.

Cette option correspond simplement à l’url de votre gif animé (par exemple), et ce dernier sera injecté en background dans votre champ, pour ensuite disparaitre une fois la requête finie.

Voici donc un exemple d’initialisation du plugin avec l’option loaderImg:

var options, a;
jQuery(function(){
  options = {
      serviceUrl:'service/autocomplete.ashx',
      loaderImg:'/images/ajax-loader.gif'
  };
  a = $('#query').autocomplete(options);
});

Si aucune valeur n’est spécifiée pour cette option,  le plugin cherchera à charger “loader.gif”.

Je vous invite à consulter la documentation sur le site de devbridge pour consulter le détail des options disponibles.

J’améliorerai peut être la chose avec plus d’options (par exemple, pour l’instant, l’image est injectée en fond du champ input concerné en haut a droite, mais on pourrait par exemple  proposer une option pour justement modifier l’endroit où est injecté ce ‘signal’ visuel).

Voici donc une archive zip contenant le code source, sa version compressée, une feuille de style, et jQuery 1.3.2.

J’ai pompeusement flaggé ce fichier 1.1.3 , parce qu’a mon gout, évolution mineure, mais évolution quand même.

jquery.autocomplete-1.1.3

Testé sous IE6/7/FF 3.6.2

Tags: , , , ,

2 Responses to “jQuery ajax autocomplete : amélioration en libre service”

  1. 01101101 dit :

    Bien joué ! En ce moment je fais de l’interface de back office, donc à fond dans le jQuery aussi… D’ailleurs si j’ai des questions insolubles, possible que je fasse appel à tes connaissances ! ;)

  2. pixelboy dit :

    Avec plaisir cher 01101101 !

Leave a Reply