Sélecteur générique avec autocomplétion

Attention, cette contribution est EN CHANTIER : elle n’est peut-être pas fonctionnelle.

Nota SPIP-Contrib : un article minimaliste pour référencer ce plugin et comme support de notes et forum.
Un plugin à but de recherche et développement.

Pour SPIP 3 le plugin a évolué, une partie spécifique est présente en fin de l’article.

Ce plugin a pour but de préparer le terrain pour de futures améliorations de l’espace privé de SPIP. Il s’occupe des « sélecteurs », ces éléments d’interface qui permettent à l’utilisateur de choisir un mot-clé à ajouter à un article (ou une rubrique, ou un auteur, etc). L’idée est la suivante : si le nombre d’éléments disponibles est grand, on tape quelques lettres, et le système renvoie, en ajax, une liste correspondant à ces lettres.

La liste elle-même est produite par des squelettes, ce qui permet à chacun de modifier le cœur du système pour l’adapter à un besoin spécifique.

Exemple : ajout d’un mot-clé « pays », on a tapé les lettres « Al » et voici le menu :

A noter : bien qu’il s’agisse d’un développement « alpha », le plugin est déjà fonctionnel et est utilisé en production sur différents sites. Mais il demande encore du travail avant d’être éventuellement intégré à SPIP.

Caractéristiques attendues

Les objectifs sont d’obtenir une interface :
-  suffisamment riche pour égaler en fonctionnalité les sélecteurs qui existent déjà dans SPIP ;
-  suffisamment simple pour pouvoir évoluer (ceux de SPIP sont une voie de garage tellement ils sont devenus complexes).
-  l’ergonomie est prioritaire :

  • « intuitif »
  • « rapide »
  • « clair »

Téléchargement

Ce plugin, bien qu’en développement, est disponible au format zip sur files.spip.org/spip-zone.

Important Le .htaccess du site doit être activé (car l’appel des données se fait via le url réécrite /selecteur.api)

SPIP 3

Pour commencer, pensez à ajouter la directive suivante dans votre .htaccess :

RewriteRule ^([\w]+)\.api(/(.*))?$ spip.php?action=api_$1&arg=$3 [QSA,L]

Le plugin fourni par défaut des sélecteurs pour les objets suivants :

  • auteur
  • rubrique
  • mot

Pour ajouter un nouveau sélecteur, suivre les étapes suivantes :

  • Créer un fichier dans le répertoire selecteurs/monselecteur.html
  • Ce fichier doit retourner une liste de résultat au format json :
    [
        {"label":"Titre 1", "value":"valeur1"},
        {"label":"Titre 2", "value":"valeur2"}
    ]

    Le label est ce qui sera affiché dans la liste déroulante, tandis que la valeur est ce qui sera réellement utilisé pour remplir le champ.

  • le champ connecté au selecteur doit posséder l’attribut data-selecteur, la valeur associée est le nom du sélecteur :
    <input type="text" value="" data-selecteur="monselecteur" />

Pour plus d’information voyez le commentaire de commit

Auteur plugin

Fil

Dernière modification de cette page le 14 février 2019

Discussion

22 discussions

  • 3

    Bonjour, avant de bricoler je voulais me renseigner. Savez vous s’il existe un plugin pour la partie privée (ou crayon) proposant un sélecteur autocompletion lorsque on veut ajouter un lien interne. Si ça ne vous semble pas existé ou en travaux dans le réseau, l’idée serait donc que le bouton lien de la fenêtre de rédaction permette ou de mettre un lien externe ou un lien interne qui s’était facilité par l’apparition des titles d’articles en mode autocompletion. Cette petite box agrémentéet de la possibilité de mettre un attribut nofollow et pourquoi pas un blank. Je rêverais que ce tool existe car je n’ai pas spécialement le temps et sur des dizaines de sites j’avoue que c’est toujours hyper chiant pour le linking interne. Ce type de plugin existe chez le monstre outre atlantique et c’est très pratique.

    Répondre à ce message

  • 5

    Bonjour,
    Je cherche à créer un sélecteur sur un groupe de mot clefs en autocomplétion pour un formulaire en spip 3.1.1.
    Pour le selecteur j’ai le code suivant :

    <BOUCLE_mots(MOTS){titre LIKE #ENV{q}%}{id_groupe=1}{par titre}{","}{0,10}>{"id":#ID_MOT,"label":[(#TITRE|json_encode)],"value":[(#ID_MOT)]}</BOUCLE_mots>]

    La liste s’affiche correctement. Par contre lorsque je sélectionne une entrée, c’est l’id du mot qui s’affiche dans l’input.
    Si je met la balise #TITRE pour « value », l’affichage est correct. Mais dans ce cas je ne vois pas comment récupérer l’id du mot, pour faire mon traitement dans la fonction « traiter » du formulaire.
    Il y a t’il un moyen de récupérer l’id du mot ?
    Merci d’avance pour les suggestions

    • Bé c’est normal. jQuery autocomplete ça ne gère que l’autocomplétion, la liste qui s’affiche pour aider, ça ne gère pas le contenu de l’input à priori. Après c’est un input normal, donc si toi tu dois envoyer un ID dans le formulaire, bah oui la valeur c’est un ID…

      Après ya un système de callback JS, et on peut coder du coup des comportements additionnels lorsque tu sélectionnes un truc, mais bon faut coder en JS. J’avais fait ça une fois pour un besoin, et lors de la sélection j’ajoutais alors du HTML sous l’input avec des labels humains, et des input « hidden » avec les valeurs que je voulais vraiment poster. Mais bon ya pas de truc tout fait pour ça quoi, à priori.

    • Merci pour ce retour rapide.
      J’avais envisagé la callback JS, mais j’ai hésité à me lancer la dedans. Finalement ca reste assez simple à mettre en place. Et en plus ca fonctionne.
      Pour les curieux, il suffit d’avoir le code suivant coté formulaire

      <script type="text/javascript">
      function cb_ville(event, ui){$('#id_ville').val(ui.item.id);}
      </script>
      <input type="hidden" name="id_ville" id="id_ville" value="#ENV{id_mot}">
      <input type="text" name=ville class="text" data-selecteur="villes" data-select-callback="cb_ville" />
    • Bonsoir
      Encore une question. Est-il possible de faire l’équivalent avec un crayon ?
      Le but est de pouvoir modifier le mot clé associé à un article via un sélecteur générique dans un controleur de crayon. Le sélecteur fonctionne, mais comme dans le cas précédent je bute sur la récupération de l’id du mot.
      Merci d’avance

    • bé tu fais pareil, mais il faut que ton script cherche le champ aussi après chargement ajax (fonction onajaxload)

    • J’ai besoin de l’id coté serveur pour mettre à jour la base. Du coup, je ne vois comment la fonction onajaxload peut aider dans ce cas, puisqu’en principe c’est appelé au moment du chargement de la vue.
      le formulaire du controleur envoie bien l’id au serveur. Je pensais surcharger la fonction verifier du crayon pour changer le mot clé associé à l’article. Mais bon l’id n’est pas dans le contexte envoyé à la fonction.
      ca m’a l’air mal engagé la. ou alors j’ai manqué quelque chose ...

    Répondre à ce message

  • Un petit exemple de json qui fonctionne bien chez moi sur le site public. À ajouter dans son selecteurs/articles.html (par exemple)

    #HTTP_HEADER{Content-Type: text/plain; charset=#CHARSET}
    #SET{tableau,#ARRAY}
    <BOUCLE_s(ARTICLES){titre LIKE %(#ENV*{q})%}{tout}{lang}>
    #SET{tableau,#GET{tableau}
    	|array_merge{
    		#LISTE{
    			#ARRAY{
    				label,#TITRE,
    				value,#TITRE,
    				url,#URL_ARTICLE
    			}
    		}
    	}
    }
    </BOUCLE_s>
    [(#GET{tableau}|json_encode)]
    #FILTRE{trim}

    Merci à RastaPopoulos et jLuc pour leur soutien moral :)

    Répondre à ce message

  • 6

    C’est très sympa votre outil mais s’il ne sert qu’à celui qui l’a fabriqué vous allez vous retrouver bien isolé si personne ne peut s’en servir.

    Plugin très symptomatique des manques de SPIP : toute une page mais aucune explication claire pour s’en servir, même en SPIP 3.2

    Un exemple de squelette eut été bienvenu, avec en prime l’usage de json expliqué en deux lignes etc … à moins que cette documentation ne soit obsolète …

    • Merci de ce commentaire, sympathique, bienveillant et constructif ! Au fait, aviez-vous remarqué le contenu des toutes premières lignes présentes sur cette page de doc ?

      « Nota SPIP-Contrib : un article minimaliste pour référencer ce plugin et comme support de notes et forum. Un plugin à but de recherche et développement. »

      Au moins, reconnaissez que le lecteur est tout de même prévenu qu’il s’agit sans doute ici d’un outil pour utilisateur un peu averti, non ?

      Et si à la critique (un peu acide), l’on préférait l’entraide ? Savez-vous que toutes les propositions d’amélioration sont les bienvenues ? À plusieurs, on va plus loin, c’est bien connu.
      Bonne journée et au plaisir

    • Merci Manu,
      votre réponse confirme ce que j’ai écrit et que je réitère : quand la documentation n’en est pas une les utilisateurs s’en vont.

      Je ne connais pas de critique qui ne soit pas vexante pour celui ou celle qui ne veut jamais se remettre en question. Et quand en plus on veut donner des leçons de coopération ça frise la mauvaise foi.

      Donc je n’aurai pas droit à des explications pour avoir osé critiqué et de ne pas avoir fait les courbettes conventionnelles, c’est très enfantin finalement ce système d’entraide que vous proposez.

    • Selecteur générique est comme expliqué un outil pour squelette, plugins, donc on l’active et il apporte la prise en charge dans des champs input de l’auto-completion avec jquery.ui.autocomplete. En résumé c’est click & play. Il peut être utilisé avec grappes, sélections éditoriales, et bien d’autres certainement.

      Ensuite si l’on veut aller plus loin,
      Il propose des modèle de données .json, comme expliqué dans le dossier selecteurs/.

      ça permet de créer d’autres selecteurs pour ce que l’on souhaite, a priori quand on en arrive la, c’est qu’on a le code du plugin sous la main, donc autant copier le ficher d’un selecteur et l’éditer.

      Que dire ou expliquer de plus ? Quand ça ne fonctionne pas c’est bien souvent un soucis de js, donc on regarde la console, …

      Une info qui peut être intéressante est ce commentaire de commit, le jour ou l’auteur l’a rendu « générique » : https://zone.spip.org/trac/spip-zone/changeset/66198

      Sinon je l’utilise assez souvent peut-être que je peut répondre a votre question … si c’est pertinent ce sera reporté sur l’article très certainement.

    • Bonjour Mist. GraphX
      Est-ce que tu confirmes que ça fonctionne sur SPIP3.2 pour toi ?
      parce qu’une fois activé même dans l’espace privé ça ne fonctionne pas.

      J’ai dans le répertoire fichiers_obsolètes après maj vers SPIP3.2 le fichier js autocomplete car Jquery.ui incorpore tout ça, mais même après l’avoir appelé, ça ne marche pas :/

      D’autre part, ce serait super d’avoir un fichier de démo dans le plugin pour tester !

      Merci de ta réponse

    • Donc je n’aurai pas droit à des explications pour avoir osé critiqué et de ne pas avoir fait les courbettes conventionnelles, c’est très enfantin finalement ce système d’entraide que vous proposez.

      Si t’es pas assez grand pour comprendre la différence entre faire des courbettes et la simple politesse de base… l’enfant est plutôt de l’autre côté.

      Ce genre de demande insistante en mode passif-agressif est très symptomatique d’une attente de consommateur, comme si tu avais acheté quelque chose et que l’on te devait un service, qui serait dû.

      On fait tou⋅tes du SAD : du service après-don, sur notre temps libre, quand on le peut, et qu’on en a envie (si on n’est pas à la plage ou à jouer avec les enfants ou à cuisiner…). Et si tu parcours les forums rien que sur ce site, tu verras sans chercher longtemps qu’on y passe tou⋅tes beaucoup de temps, que ce soit moi ou plein d’autres, sans jamais râler pour répondre aux questions des gens (et on a même de nombreux retours du style « Merci d’avoir répondu si vite »). Mais avec des messages de la sorte, ce n’est pas bien compliqué de comprendre que ça ne donne pas super envie de répondre au plus vite et d’être agréable.

      Sur ce, je vais cuisiner pour l’instant…

      (Et oui la doc est bancale pour l’instant, ça mélange un vieux truc de l’ancienne version du plugin avec des choses refondues pour SPIP 3.X. Mais c’est pour les développeurs/intégrateurs et il y a quand même le lien vers le détail dans le log de commit qui contient plein de doc sur les options ajoutées, qu’il faudrait reporter dans l’article c’est certain. Cela dit la zone est morte aujourd’hui, 502.)

    • Hello,

      Je confirme, le plugin fonctionne parfaitement en spip 3.2. je l’ai encore intégré la semaine dernière pour de l’autocomplete de gis et de mots clefs pour un form de recherche (merci aux auteurs au passage).

      Si on l’utilise coté public, la manière d’inssérer jquery.ui a changé depuis spip 3.2, mais le plugin s’en occupe tout seul (tellement il est bien conçu ;P ).

      En lisant le code (ce qui reste à mon avis la documentation la plus a jour et surtout la plus exhaustive des fonctionnalitées généralement) : on trouve l’option

      define('_SELECTEUR_GENERIQUE_ACTIVER_PUBLIC', true);

      qui est bien utile et évite de charger manuellement les scripts jquery.ui comme on pouvait le faire précédement dans certains cas (quoi qu’une fonction s’en occupait en 3.1).

      A priori avec un necessite et ce define dans le paquet.xml du plugin, tout fonctionne comme attendu coté public.

    Répondre à ce message

  • 2

    Bonjour, dans le cadre d’un site internet utilisant le squelette Géodiversité, le plugin Sélecteur Générique est utilisé pour afficher une association d’un objet (un média) vers une collection (plugin Medias Collections). Dans ce cas, il faut créer, par exemple, un fichier selecteurs/collections.html ? Comment modifier un fichier html déjà existant, par exemple, auteur.html ?

    Merci d’avance pour ces éclaircissements.

    • Tu l’appelles comme tu veux, du moment qu’ensuite tu donnes le même bon nom dans le « data-selecteur ».

      Pour changer un des existants, c’est comme pour tout fichier de SPIP, tu peux le surcharger dans ton dossier prioritaire (ton dossier « squelettes » ou ton plugin dédié si tu utilises les plugins), avec le même chemin relatif (squelettes/selecteurs/xxx.html).

      Cela dit, il reste des vieux fichiers comme celui pour « auteur » qui utilisent un ancien format du plugin. Normalement maintenant les sélecteurs doivent produire du JSON. C’est un peu le bazar, je le concède…

    • Juste pour préciser, Filipe rencontrait des problèmes avec le sélecteur générique car il n’avait pas activé le htaccess de SPIP en le renommant de htaccess.txt vers .htaccess ;)

    Répondre à ce message

  • 1

    Bonjour,
    je n’arrive pas à utiliser le plugin dans la partie publique.
    les fichiers exemples du dossier « selecteurs » ne produisent pas du json,
    Je suppose qu’il y a quelque chose à appeler d’autre que juste :
    <input type="text" value="" data-selecteur="monselecteur" />
    Non ?

    par ailleurs, le selecteur « mot » demande des arguments, je n’ai pas trouvé la syntaxe pour lui passer les paramètres.

    • En fait ya un mélange car dans le plugin il y a toujours d’anciens sélecteurs avec une autre méthode d’avant. Mais pour celui qui est décrit avec data machin, il faut que ça produise du JSON oui.

    Répondre à ce message

  • 2

    Bonjour,
    Cela ne fonctionne pas.
    J’ai un .htacces OK avec ce qu’il faut dedans comme décrit plus haut
    Un version SPIP 3.11
    Je l’utilise avec le plugin « Grappes ».
    Merci de vos lumières.

    • Je n’utilise pas le plugin Grappes donc je ne sais pas ce qui est censé marcher ou pas. Peut-être faut-il poser la question sur ce plugin ? Parce que l’autocomplétion fonctionne dans d’autres besoins.

    • Merci pour cette réponse rapide, je vais voir ce qui se passe avec Grappes.
      Avec les autres bessons que j’utilise ? cela ne fonctionne pas non plus.

    Répondre à ce message

  • Je viens de d’installer ce plugin sur un site en 3.1 et rien ne fonctionne. Une idée de comment je pourrais identifier le problème ?

    Répondre à ce message

  • Est-ce qu’il y a une raison pour laquelle les articles n’ont pas de sélecteur défini ?

    Est-ce que je peux le rajouter au plugin ?

    Répondre à ce message

  • Bonjour,
    Après avoir testé le plugin, j’ai vu qu’il affiche l’auto-completion.

    Mais quand je clique un item, il rempli l’input de la boite recherche avec id_article ou id_rubrique. et puis
    quand je clique sur le bouton recherche, il recherche cet ID. c’est dommage.

    Je voudrais créer un $_GET[’rubrique78’] avec le lien du site comme « spip.php ?rubrique78 ». Si non Je voudrais avoir un solution pour modifier ce plugin.

    ça serait plus si qqn me laisser un conceil sur ce plugin pour qu’il marche

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom