Carnet Wiki

Version 3 — il y a 4 semaines Mist. GraphX

En cours de rédaction

Objectif :

Ajouter un formulaire avec auto-completion, en utilisant les sélecteurs génériques.

Préparer le terrain :

Activer le htaccess de spip, ainsi que les appels aux api (cf. la doc du plugin selecteur_generique).

paquet.xml

Dans le paquet.xml du plugin ou squelette, ajouter le nécessite

  1. <necessite nom="selecteurgenerique" compatibilite="[1.1.8;]" />

_options.php

Dans le fichier options, activer l’utilisation des sélecteurs coté public.

  1. define('_SELECTEUR_GENERIQUE_ACTIVER_PUBLIC',true);

Créer un dossier selecteurs, qui contiendra les fichiers générant les datas (au format json), renvoyées lors de la saisie.

Fichier générique de data :

  1. #HTTP_HEADER{Content-Type: text/plain; charset=#CHARSET}
  2. #CACHE{0}
  3. #SET{resultats, #LISTE}
  4. [(#REM)<!-- Chercher les mots correspondant a la requete  -->]
  5. <BOUCLE_s(OBJET){titre LIKE %(#ENV*{q})%}
  6. {0,20}{par titre}>
  7.  [(#SET{resultats, [(#GET{resultats}|push{#ARRAY{label,#TITRE,value, #TITRE,id,#ID_MOT,groupe,#ID_GROUPE}})]})]
  8. </BOUCLE_s>
  9. [(#GET{resultats}|json_encode)]
  10. #FILTRE{trim}

Télécharger

Création du formulaire :

  1. &#91;(#REM)&lt;!-- Formulaire de recherche pro
  2.  
  3.  
  4. Formulaire a 2 entrée Liste
  5. - categorie de pro
  6. - liste des points de localisation
  7.  
  8.  
  9. Action : envoie sur la page listing des pros
  10. paramètre :
  11.   secteur d'activité, localisation choisie
  12.  -->]
  13. <div class='formulaire_spip formulaire_recherche formulaire_#FORM'>
  14.         [<p class="reponse_formulaire reponse_formulaire_ok">(#ENV**{message_ok})</p>]
  15.         [<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</p>]
  16.  
  17.  
  18. [(#ENV{editable})
  19.         <form method="post" action="#ENV{action}">
  20.     <div>
  21.                 #ACTION_FORMULAIRE{#ENV{action}}
  22. [(#REM)&lt;!--
  23. [(#ENV**|array2table)]
  24.  
  25.  
  26. Ajouter en config les groupes de mots
  27. des catégories et localisation
  28.  
  29.  
  30. categorie:
  31.         liste les mots-clefs des groupes de mots categorie/secteurs d'activité
  32.  
  33.  
  34. localisations
  35.         liste les points gis associés au mot clef localisation
  36.  -->]
  37.                         <input type="hidden" name="id_groupe" id="id_groupe" value="#ENV{id_groupe}">
  38.                         <input type="hidden" name="id_categorie" id="id_categorie" value="#ENV{id_categorie}">
  39.                         <input type="hidden" name="id_localite" id="id_localite" value="#ENV{id_localite}">
  40.       [(#SAISIE{input, categorie,
  41.         label=Je recherche pour,
  42.                                 attributs='data-selecteur="categories" data-select-callback="cb_categorie"',
  43.                                 placeholder='Saisissez une catégorie'
  44.                         })]
  45.  
  46.  
  47. [(#SAISIE{input,localisation,
  48.         label= Près de ,
  49.                                 attributs='data-selecteur="localisations" data-select-callback="cb_localite"',
  50.                                 placeholder='Saisissez une localité'
  51.                         })]
  52.  
  53.  
  54. <!--extra-->
  55.                 <p class="boutons">
  56.         <input type="submit" class="btn btn-success" value="Chercher" />
  57.       </p>
  58.           </div>
  59.   </form>]
  60. </div>
  61. <script type="text/javascript">
  62. function cb_localite(event, ui){
  63.         $('#id_localite').val(ui.item.id);
  64. }
  65.  
  66.  
  67. function cb_categorie(event, ui){
  68.         $('#id_categorie').val(ui.item.id);
  69.         $('#id_groupe').val(ui.item.groupe);
  70. }
  71. </script>

Télécharger