SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano

279 Plugins, 195 contribs sur SPIP-Zone, 105 visiteurs en ce moment

Accueil > Outils pour plugins > jQuery UI > Réaliser un champ de formulaire avec autocomplétion avec jQuery (...)

Réaliser un champ de formulaire avec autocomplétion avec jQuery UI

27 février 2013 – par erational – commentaires

14 votes

Ceci est une « contribution pédagogique », qui montre par l’exemple comment développer une nouvelle fonctionnalité pour SPIP.

Cet article est un tutoriel pour montrer la simplicité d’intégration de jQuery UI dans SPIP 3.

Dans un premier temps, nous allons intégrer tout le code « à la main » pour analyser le mode de fonctionnement. En fin d’article on proposera la même solution via le plugin Sélecteur générique qui propose la même solution d’une façon standard et générique.

Sur le même sujet, consulter l’article qui explique la façon d’intégrer jQuery UI dans vos plugins

Objectif

Le but est de réaliser un champs de formulaire avec auto-complétion.

Il existe plusieurs solutions compatible avec jQuery comme AutoComplete, typeahead.js. Nous allons retenir celle fournie par Jquery UI qui a l’avantage d’être intégrée nativement dans SPIP 3.

En savoir plus : Page de documentation du widget jQuery UI Autocomplete

Étape 1 : Charger jQuery UI Autocomplete

Comme beaucoup de plugins javascript, il convient de charger les feuilles de style et les scripts. En SPIP 3, jQuery UI est fourni sous forme d’un plugin du noyau nommé plugins-dist/jquery_ui

Éditer dans votre page squelette en ajoutant les lignes suivantes

  1. <head>
  2. ...
  3. <script type="text/javascript" src="#CHEMIN{prive/javascript/ui/jquery-ui.js}"></script>
  4. <script type="text/javascript" src="#CHEMIN{prive/javascript/ui/jquery.ui.autocomplete.js}"></script>
  5. <link rel="stylesheet" href="[(#CHEMIN{css/jquery-ui.css})]" type="text/css" media="all" />
  6. ...
  7. </head>

Télécharger

Inutile d’ajouter jQuery qui sera chargé automatiquement via la balise #INSERT_HEAD

Étape 2 : Préparer les données

Le plugin est chargé. Il faut maintenant alimenter l’auto-complétion par une liste de mots qui sera appelée lorsque l’utilisateur tapera un mot

Cette page lorsqu’on lui soumet la requête « pie » devra retourner tous les mots contenant ces lettres comme pierrot, homo sapiens, pie noire ....

Nous allons, par exemple, lister tous les mots-clés du site en créant une page autocomplete.html

  1. [(#REM) noisette ajax pour fournir une liste de mots
  2. l'autocompletion jQuery UI autocomplete
  3.  
  4. parametre
  5. - term : lettre cherchee
  6.  
  7. ]#HTTP_HEADER{Content-Type: text/plain; charset=#CHARSET}
  8. [<BOUCLE_mots(MOTS){titre LIKE %#ENV{term}%}{par titre}{","}{0,10}>{"id":#ID_MOT,"label":[(#TITRE|json_encode)],"value":[(#TITRE|json_encode)]}</BOUCLE_mots>]

Télécharger

Explications

  • La balise #HTTP_HEADER permet de forcer le Mime-type et d’empêcher l’affichage des boutons
  • La boucle MOTS effectue une recherche avec le critère LIKE qui permet d’avoir un joker
  • La syntaxe est en format JSON, ce qui implique de séparer les résultats par des virgules {","} et d’encoder les balises SPIP avec le filtre json_encode

Selon vos besoins, il faudra personnaliser cette page qui alimente la liste de mots.

Étape 3 : Appeler l’auto-complétion sur votre champs de formulaire

Il faut maintenant appeler le plugin sur un objet de la page, par exemple, le formulaire de recherche et son champs principal qui possède l’id recherche

L’appel se fait en javascript, par exemple en ajoutant dans votre head, le code suivant :

  1. <head>
  2. ...
  3. <script type="text/javascript">
  4. $(function() {
  5. $( "#recherche").autocomplete({
  6. source: "spip.php?page=autocomplete",
  7. minLength: 2,
  8. });
  9. });
  10. </script>
  11. ...
  12. </head>

Télécharger

Explications
On appelle la page listant les mots avec le paramètre minLength qui permet de déclencher les appels uniquement à partir de la 3e lettre tapée (pour éviter d’épuiser inutilement le serveur).

Voilà l’autocomplétion est en place !


Alternative : Réaliser la même chose avec le plugin sélecteur générique

La plugin Sélecteur générique propose de faire le travail à votre place. Pour pouvoir l’utiliser dans la partie publique, installer au préalable le plugin Sélecteur publique (à télécharger sur cet article)

Ensuite l’autocomplétion est extrêmement simplement à mettre en place

Sur votre champ input, ajouter l’attribut data-selecteur

Créer une page dans votre répertoire squelettes/selecteurs/patate.html

  1. #HTTP_HEADER{Content-Type: text/plain; charset=#CHARSET}
  2. [(#REM)
  3.  
  4. noisette ajax pour fournir une liste de mots
  5. l'autocompletion jQuery UI autocomplete via le plugin selecteur generique
  6.  
  7. parametre:
  8. - q : recherche
  9.  
  10. ][<BOUCLE_mots(MOTS){titre LIKE %#ENV{q}%}{par titre}{","}{0,10}>{"id":#ID_MOT,"label":[(#TITRE|json_encode)],"value":[(#TITRE|json_encode)]}</BOUCLE_mots>]

Télécharger

Pour en savoir plus sur le commit d’intro du sélecteur générique et aussi Sélecteur générique

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 6 juin à 11:31, par tcharlss En réponse à : Réaliser un champ de formulaire avec autocomplétion avec jQuery UI

    Un article super pratique qui m’a bien dépanné, merci.
    J’ai quand même des remarques sur 2 points :

    1) Dans le script activant l’autocomplétion, il vaut mieux utiliser la balise #URL_PAGE{autocomplete}.
    J’ai d’abord utilisé l’url spip.php?page=autocomplete comme indiqué dans l’exemple, mais ça ne marchait pas : il manquait le « ../ » au début. Ca dépend peut-être des cas de figure, en tout cas avec la balise #URL_PAGE on est sûr d’avoir la bonne adresse.

    2) Pour charger les scripts jquery ui, il y a la pipeline jqueryui_plugins qui permet d’éviter de charger les scripts en doublons.
    Dans mes_options.php :

    1. $GLOBALS['spip_pipeline']['jqueryui_plugins'] .= "|jqueryui_autocomplete";
    2. function jqueryui_autocomplete($scripts){
    3. $scripts[] = 'jquery.ui.autocomplete';
    4. return $scripts;
    5. }

    Télécharger

    Répondre à ce message

  • Le 23 avril à 19:35, par Billou En réponse à : Réaliser un champ de formulaire avec autocomplétion avec jQuery UI

    Ah finalement j’ai un léger soucis, je me retrouve avec des devant les : qui sont dans les titres des mots-clés listés par l’autocomplete…

    Une idée là-dessus ?

    • Le 23 avril à 22:25, par Billou En réponse à : Réaliser un champ de formulaire avec autocomplétion avec jQuery UI

      J’ai trouvé comment résoudre le soucis :

      Dans autocomplete.html, avant d’encodre en json, j’applique un filtre textebrut :

      [(#REM) noisette ajax pour fournir une liste de mots
            l'autocompletion jQuery UI autocomplete

           parametre
           - term :    lettre cherchee

      ]#HTTP_HEADER{Content-Type: text/plain; charset=#CHARSET}
      [<BOUCLE_mots(MOTS){titre LIKE %#ENV{term}%}{par titre}{","}{0,10}>{"id":#ID_MOT,"label":[(#TITRE|textebrut|json_encode)],"value":[(#TITRE|textebrut|json_encode)]}</BOUCLE_mots>]

    Répondre à ce message

  • Le 23 avril à 18:41, par Billou En réponse à : Réaliser un champ de formulaire avec autocomplétion avec jQuery UI

    Très bon merci ! J’utilisais le même mais avec une solution de base avec la doc JQuery, mais toute la liste des mots-clés s’affichait dans le code source des pages… Grâce à cette méthode, plus de soucis de ce genre.

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Nuage (de mots-clés)

    28 décembre 2006 – 305 commentaires

    L’article « Afficher les mots-clés en faisant varier la taille de la police » de BoOz et Fil permettait déjà d’afficher un nuage de mot-clés. Le présent article reproduit exactement les mêmes résultats, puisqu’il s’agit de son adaptation sous forme de (...)

  • Forms&Tables 2.0

    31 décembre 2009 – 629 commentaires

    Gestion et administration de formulaires éditables. Ce plugin permet également la publication de sondages et enquètes, la collecte des réponses dans la base de données et le téléchargement au format csv. Ce plugin est une adaptation de la version pour (...)

  • Les points d’entrées de Forms&Tables

    11 décembre 2008 – 11 commentaires

    Le plugin F&T comprend un certain nombre de points d’entrées utiles pour modifier ou enrichir son comportement par défaut sans en modifier le code.

  • Des intertitres hiérarchisés et des outils pour les manipuler

    21 septembre 2008 – 100 commentaires

    Cet article décrit les fonctions du plugin Intertitres hiérarchisés et table des matières qui donne accès à des intertitres de niveaux différents ainsi qu’à des modèles permettant de faire une table des matières, des renvois et d’avoir accès à des (...)

  • GIS 4

    11 août 2012 – 730 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)