var Phenix = function () {
Troll du Web depuis 1996

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.

  1. <?php
  2.  
  3. if (!defined('_ECRIRE_INC_VERSION')) {
  4. return;
  5. }
  6.  
  7. function formulaires_recherche_ajax_charger_dist($ajax_bloc) {
  8. return array(
  9. 'ajax_bloc' => $ajax_bloc,
  10. 'recherche_'.$ajax_bloc => _request('recherche_'.$ajax_bloc),
  11. 'lang' => $lang,
  12. );
  13. }

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.

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

Dans le même fichier, à la fin, un peu de javascript pour actualiser la recherche :

  1. <script type="text/javascript">
  2. // Chaque input déclenche la recherche ajax
  3. $("#recherche_#ENV{ajax_bloc}").on("input", function () {
  4. ajaxReload(
  5. "#ENV{ajax_bloc}",
  6. {
  7. args: {
  8. // Envoyer le contenu du formulaire dans le
  9. // contexte de recherche SPIP
  10. recherche: $(this).val()
  11. }
  12. }
  13. );
  14. });
  15. </script>

Dans le bloc ajax, je place simplement ma boucle de recherche :

  1. <B_article_ajax>
  2. #ANCRE_PAGINATION
  3. <BOUCLE_article_ajax(articles){recherche ?}{par date}{inverse}{pagination}>
  4. <INCLURE{fond=inclure/article_resume}{id_article} />
  5. </BOUCLE_article_ajax>
  6. [<p class="pagination">(#PAGINATION)</p>]
  7. </B_article_ajax>

Il ne reste qu’à appeler tout cela :

  1. [(#FORMULAIRE_RECHERCHE_AJAX{grille_article})
  2.  
  3. ]<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 :).

Un message, un commentaire ?
modération a priori

Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

Qui êtes-vous ?
Votre message
  • Pour créer des paragraphes, laissez simplement des lignes vides.