Carnet Wiki

Version 3 — Juillet 2018 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

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

_options.php

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

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 :

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

Création du formulaire :

&#91;(#REM)&lt;!-- Formulaire de recherche pro


Formulaire a 2 entrée Liste
- categorie de pro
- liste des points de localisation


Action : envoie sur la page listing des pros
paramètre :
  secteur d'activité, localisation choisie
 -->]
<div class='formulaire_spip formulaire_recherche formulaire_#FORM'>
	[<p class="reponse_formulaire reponse_formulaire_ok">(#ENV**{message_ok})</p>]
	[<p class="reponse_formulaire reponse_formulaire_erreur">(#ENV*{message_erreur})</p>]


[(#ENV{editable})
	<form method="post" action="#ENV{action}">
    <div>
		#ACTION_FORMULAIRE{#ENV{action}}
[(#REM)&lt;!--
[(#ENV**|array2table)]


Ajouter en config les groupes de mots
des catégories et localisation


categorie:
	liste les mots-clefs des groupes de mots categorie/secteurs d'activité


localisations
	liste les points gis associés au mot clef localisation
 -->]
 			<input type="hidden" name="id_groupe" id="id_groupe" value="#ENV{id_groupe}">
 			<input type="hidden" name="id_categorie" id="id_categorie" value="#ENV{id_categorie}">
			<input type="hidden" name="id_localite" id="id_localite" value="#ENV{id_localite}">
      [(#SAISIE{input, categorie,
        label=Je recherche pour,
				attributs='data-selecteur="categories" data-select-callback="cb_categorie"',
				placeholder='Saisissez une catégorie'
			})]


[(#SAISIE{input,localisation,
        label= Près de ,
				attributs='data-selecteur="localisations" data-select-callback="cb_localite"',
				placeholder='Saisissez une localité'
			})]


<!--extra-->
  		<p class="boutons">
        <input type="submit" class="btn btn-success" value="Chercher" />
      </p>
	  </div>
  </form>]
</div>
<script type="text/javascript">
function cb_localite(event, ui){
	$('#id_localite').val(ui.item.id);
}


function cb_categorie(event, ui){
	$('#id_categorie').val(ui.item.id);
	$('#id_groupe').val(ui.item.groupe);
}
</script>