Recherche ajax avec les formulaires SPIP

16 November 2017

Le but de ce formulaire est une recherche dynamique : a chaque nouvelle lettre dans l'input la recherche s’affine.

La bonne nouvelle c’est qu’on peut faire cela nativement avec les fonctions présentent dans SPIP.

Dans un premier temps, il faut créer un fichier formulaires/recherche_ajax.php. Il va mettre à jour le contexte du formulaire en lui passant un critère de recherche {recherche}.

<?php

if (!defined('_ECRIRE_INC_VERSION')) {
    return;
}

function formulaires_recherche_ajax_charger_dist($ajax_bloc) {
    return array(
        'ajax_bloc' => $ajax_bloc,
        'recherche_'.$ajax_bloc => _request('recherche_'.$ajax_bloc),
        'lang' => $lang,
    );
}

Ensuite un peu de JavaScript et d’HTML pour recharger un bloc ajax, dans un fichier {formulaires/recherche_ajax.html}. Ici, j’ai simplement repris le formulaire de recherche de SPIP en modifiant le {name} de l’input de recherche.

<div class="formulaire_spip formulaire_recherche[ (#ENV{class})]" id="formulaire_recherche">
    <form action="[(#ENV{action})]" method="get">
        <div class="editer-groupe">
            [(#ENV{action}|form_hidden)]
            [<input type="hidden" name="lang" value="(#ENV{lang})" />]
            <label for="#ENV{_id_champ}"><:info_rechercher_02:></label>
            <input type="[(#HTML5|?{search,text})]" class="search text" name="recherche_#ENV{ajax_bloc}" id="#ENV{_id_champ}"[ value="(#ENV{recherche})"] />
            <input type="submit" class="submit" value="&gt;&gt;" title="<:info_rechercher:>" />
        </div>
    </form>
</div>

Dans le même fichier, à la fin, un peu de JavaScript pour mettre à jour le bloc_ajax (a savoir un squelette avec la boucle de recherche). Pour plus d’information, sur le fonctionnement d’Ajax avec SPIP, la page de [la documentation officiel->https://www.spip.net/fr_article3753.html] est bien faite.

 // Chaque input déclenche la recherche ajax
 $("#recherche_#ENV{ajax_bloc}").on("input", function () {
     ajaxReload(
         "#ENV{ajax_bloc}",
         {
             args: {
                 // Envoyer le contenu du formulaire dans le
                 // contexte de recherche SPIP
                 recherche: $(this).val()
             }
         }
     );
 });

Dans le bloc ajax (un fichier inclure/grille_article), je place simplement ma boucle de recherche :

[(#SET{defaut_tri,#ARRAY{
    titre,1,
    num titre,1,
    date,#ENV{date_sens,-1},
    id_article,1,
    points,-1
 }})]

<B_article_ajax>
    #ANCRE_PAGINATION
    <BOUCLE_article_ajax(ARTICLES){recherche ?}{tri #ENV{par,#ENV{recherche}|?{points,num titre}},#GET{defaut_tri}}{pagination}>
        <INCLURE{fond=inclure/article_resume, id_article} />
    </BOUCLE_article_ajax>
    [<p class="pagination">(#PAGINATION)</p>]
</B_article_ajax>

Il ne reste qu’à appeler tout cela :

[(#FORMULAIRE_RECHERCHE_AJAX{grille_article})]

<INCLURE{fond=inclure/grille_article, env, ajax=grille_article} />

Pour en savoir plus sur les formulaires de SPIP, rien ne vaut la documentation de spip.net :).