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
Depuis spip 3.2 (méthode recommandé) :
Dans le fichier options, activer l’utilisation des sélecteurs coté public.
define('_SELECTEUR_GENERIQUE_ACTIVER_PUBLIC',true);
Avant (méthode obsolète) :
function prefix_inserer_javascript($flux){
if(test_plugin_actif('selecteurgenerique')){
include_spip('selecteurgenerique_fonctions');
$flux .= selecteurgenerique_verifier_js($flux);
}
return $flux;
}
Selecteurs
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}
Ajouter l’auto-completion aux saisies
attribut | valeur | explication |
data-selecteur |
article,mot,generique | fonction php ou squelette json |
data-select-php |
oui | chercher une fonction PHP au lieu d’un squelette dans le dossier selecteurs |
data-select-params |
objet JSON | paramètres transmis au selecteur et utilisables dans le skel ou la fonction php. Par exemple pour le selecteur generique :« limite » => limiter le nombre de résultats « objets » => liste d’objets pour filtrer ceux qui seront sélectionnables « objets_exclus » => l’inverse |
data-select-callback |
string | nom de la fonction javascript de callback |
Références
Exemple tiré du plugin Sélection éditoriales :
#SET{params, #ARRAY{objets_exclus, #LISTE{selections, selections_contenus}}|json_encode{1}|attribut_html}
[(#SET{attributs, data-selecteur="generique" data-select-php="oui" data-select-params="[(#GET{params})]"})]
[(#SAISIE{input, url,
label=<:selections_contenu:champ_url_label:>,
explication=<:selections_contenu:champ_url_explication:>,
attributs=#GET{attributs}})]
[(#REM)<!-- Formulaire de recherche
Formulaire a 2 entrée Liste
- categorie
- liste des points de localisation
Action : envoie sur la page listing
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)<!--
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>