Recherche ajax avec les formulaires SPIP
Une recherche « live »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}
.
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})" />]
- <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=">>" 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 est bien faite.
- <script type="text/javascript">
- // 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()
- }
- }
- );
- });
- </script>
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 :).