skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

mardi 4 mai 2010

Plugin autocomplete simple pour jQuery

Publié par Infinite Loop, à 21 h 18 5 commentaires

En temps normal, quand j'ai à intégrer un champ autocomplete, j'utilise le composant autocomplete de YUI qui est parfaitement configurable. Cette fois-ci, ayant remarqué que jQuery était dans le projet, je me suis dit qu'il serait avantageux de chercher un plugin jQuery qui allégerait le chargement plutôt que d'intégrer les multiples scripts nécessaires à YUI.

J'en ai trouvé un dans jQuery UI mais comme je ne souhaitais pas un thème particulier, j'ai trouvé ce plugin autocomplete simplifié créé par Jörn Zaefferer. Bien sûr, la version 1.1 possède beaucoup moins d'options et de flexibilité que ce qu'offre les autres, mais j'ai jugé bon de le mettre au banc d'essai. Parfois la simplicité est suffisante pour faire le travail. Et ça a été le cas ici pour une intégration éclair.

D'abord, il faut télécharger jquery.autocomplete.zip et le décompresser. À l'intérieur se trouve plusieurs fichiers mais je n'ai besoin que de ceux-ci :

  • jquery.autocomplete.min.js
  • jquery.autocomplete.css
  • indicator.gif
La version minifiée (.min.js) est un peu plus lourde que celle compressée .pack.js mais je préfère la première car elle n'utilise pas eval(). Liez d'abord le framework jQuery, le plugin et la feuille de style :
<script type="text/javascript" src="/js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="/js/jquery-autocomplete/jquery.autocomplete.min.js"></script>
<link rel="stylesheet" type="text/css" href="/js/jquery-autocomplete/jquery.autocomplete.css" />
Il semble y avoir une petite erreur dans la feuille de style car indicator.gif ne se trouve pas à la racine mais plutôt dans le répertoire demo. Vous pouvez soit copier l'image à la racine (ce que j'ai fait), soit changer l'URL de la classe CSS pour ceci si vous souhaitez déposer le répertoire demo en ligne :
.ac_loading {
background: white url('demo/indicator.gif') right center no-repeat;
}
Créez une page dynamique (exemple: get-data-autocomplete.php) qui fournira la source de données. Ici, ça peut provenir de n'importe où tant que chaque ligne en sortie correspond à un enregistrement (j'aurais préféré une source JSON). Par exemple, chaque ligne devra prendre la forme étiquette|valeur :
Marc|1
Marc-André|2
Martin|3
Martine|4
Mathieu|5
Matthieu|6
Mathias|7
Mathis|8
Dans le fichier principal, ajoutez le champ de formulaire HTML qui servira de point d'entrée au champ d'auto-complétion. À l'affichage, la largeur du champ définira la largeur du panneau de suggestions.
<input id="ac_field" name="ac_field" value="" type="text">
<input id="ac_value" name="ac_value" value="" type="hidden">
Et enfin le JavaScript :
$j = jQuery.noConflict();

$j(document).ready(function(){
$j('#ac_field').autocomplete(
'/ajax/get-data-autocomplete.php',
{
'minChars': 1,
'max': 10,
'mustMatch': true
}
).result(
function(e, i){
if(i != undefined){
$j('#ac_value').val(i[1]);
}
else{
$j('#ac_value').val('');
}
}
).blur(
function(){
$j('#ac_value').val();
// réinitialiser le formulaire si nécessaire
// avec des valeurs par défaut
}
);
});
Le plugin effectue automatiquement la requête Ajax avec la méthode GET et envoie au fichier PHP des paramètres utiles qui sont automatiquement nommés q et limit.
$_GET['q'] // pour filtrer la source de données
$_GET['limit'] // pour limiter le nombre de résultats retournés
Ainsi, vous pouvez adapter votre requête SQL pour filtrer les résultats d'une table.

Comme je voulais forcer l'utilisateur à faire un choix dans la liste de suggestions et ne pas accepter de nouvelles entrées, j'ai trouvé une suggestion sur Stack Overflow où quelqu'un proposait d'enchaîner les fonctions result() et blur() pour contrôler la manipulation.

Il suffira ensuite de valider côté serveur que le champ ac_value (hidden) n'est pas vide et d'afficher un message d'erreur si c'est le cas.


Tags: JavaScript

5 réponses à "Plugin autocomplete simple pour jQuery"

  1. Anonyme a dit...
    21 mars 2011 à 07 h 32

    salut

    que signifie la fonction search() ?

    ds ton code javascript
    $j(this).search();

    Infinite Loop a dit...
    21 mars 2011 à 08 h 28

    Merci de me l'avoir fait remarquer, j'ai tout simplement oublié de le retirer (j'avais créé un plugin jQuery custom pour un projet client). Dans la fonction blur, on peut réinitialiser le champ si le curseur quitte l'input autocomplete.

    Anonyme a dit...
    19 juillet 2011 à 11 h 58

    Bonjour,

    J'essaye de mettre en place ce que tu as expliqué, à savoir forcer l'utilisateur à sélectionner un résultat de la recherche.
    Le blur() fonctionne bien, mais moi je voudrai l'utiliser sur le champs visible, et le vider seulement si ça ne matche pas, avant de soumettre le form.
    Et au niveau du blur on ne récupère pas les infos liées à l'event ou l'item.

    Si tu as des pistes!!

    Merci

    Infinite Loop a dit...
    25 juillet 2011 à 06 h 50

    Ce n'est pas évident de comprendre ta problématique sans voir de code. Si tu peux m'en envoyer par email avec une explication plus détaillée, j'essaierai de t'aider.

    Anonyme a dit...
    17 août 2011 à 06 h 39

    Le problème c'est que cela charge toute la liste au démarrage. Ce qui peux poser problème si tu as une grosse liste.


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (56)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ►  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ►  février 2012 (15)
      • ►  janvier 2012 (12)
    • ►  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ▼  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ►  septembre 2010 (34)
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ▼  mai 2010 (36)
        • Buckethead et son chapeau PFK
        • Site de vente de mp3 usagés
        • Citation no. 84 sur les programmeurs
        • Microsoft compare IE6 à du lait périmé
        • Maison spéciale dans une colline en Suisse
        • Extraire les tags ID3 des mp3
        • Gaffe sous systèmes Unix / Linux
        • Marchés boursiers galactiques
        • Raccourcir les chaînes d'objets en JavaScript
        • Simulation de combat - Étape 4
        • Citation no. 83 sur la conception de logiciels
        • Journée presque parfaite, sans compromis
        • Partitions de guitare sous Linux
        • Maison en champignon à Toronto
        • Ce que devra faire Halak ce soir
        • Accordéon simple avec jQuery
        • Composer une chanson au téléphone
        • Investir dans ses connaissances
        • Simulation de combat - Étape 3
        • Citation no. 82 sur l'explication
        • Easter egg dans EA NHL 09
        • Mais qui a volé le pénis de Napoléon ?
        • Internationalisation i18n en programmation
        • Simulation de combat - Étape 2
        • Simulation de combat - Étape 1
        • C'est comme ça que ça doit être fait
        • Parc du Mont-Royal, dimanche PM
        • Citation no. 81 sur la noix de coco
        • Biographie de Mike Patton
        • Design Patterns, vous y comprenez quelque chose ?
        • Un mot pour les nerds
        • Hang, un instrument de musique atypique
        • Plugin autocomplete simple pour jQuery
        • Savoir reconnaître un manipulateur
        • Citation no. 80 sur le café
        • Empêcher un objet PHP d'être cloné
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ►  2009 (430)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ►  avril 2009 (35)
      • ►  mars 2009 (37)
      • ►  février 2009 (32)
      • ►  janvier 2009 (39)
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft