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 en lui passant un critère de recherche {recherche}.

  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 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.

  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 (un fichier inclure/grille_article), je place simplement ma boucle de recherche :

  1. [(#SET{defaut_tri, #ARRAY{titre, 1, num titre, 1, date, #ENV{date_sens, -1}, id_article, 1, points, -1
  2.  }})
  3.  
  4. ]<B_article_ajax>
  5.         #ANCRE_PAGINATION
  6.         <BOUCLE_article_ajax(articles){recherche ?}{tri #ENV{par, [(#ENV{recherche}|?{points, num titre})]}, #GET{defaut_tri}}{pagination}>
  7.                 <INCLURE{fond=inclure/article_resume}{id_article} />
  8.         </BOUCLE_article_ajax>
  9.         [<p class="pagination">(#PAGINATION)</p>]
  10. </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 :).

3 Messages

  • Recherche ajax avec les formulaires SPIP

    Le 23 janvier à 19:58 par Thomas

    Bonsoir,

    Merci beaucoup pour ce ’tuto’, il me permettrait de faire ce que je veux (joie) mais hélas je n’arrive pas à le faire fonctionner (Spip 3.1.7 ’de base’).. J’ai pas mal cherché déjà et je me dis que de toute façon, que ce soit pour moi comme pour tout le monde, quelques précisions seraient bienvenues.
    Précisions notamment sur les fichiers en jeu, leur répertoire... Certes, on a donc formulaires/recherche_ajax.php (le php), formulaires/recherche_ajax.html (html+js) mais ensuite.. « ajax_bloc » ? « inclure/grille_article » ?
    (Pour « inclure/article_resume » je pense là en revanche que tout le monde comprend que l’on fait ce que l’on veut concernant le traitement des résultats de la recherche, via l’inclusion d’un squelette ou non d’ailleurs.)

    Donc voilà, vous serait-il possible d’expliciter davantage les étapes de votre tuto (2e partie surtout) ?
    Merci encore pour ce travail !
    T

    Répondre à ce message
    • Recherche ajax avec les formulaires SPIP

      Le 25 janvier à 15:33 par phenix

      Bonjour,

      Merci pour ce retour, j’en prends bonne note :)

      Précisions notamment sur les fichiers en jeu, leur répertoire... Certes, on a donc formulaires/recherche_ajax.php (le php), formulaires/recherche_ajax.html (html+js) mais ensuite.. « ajax_bloc » ? « inclure/grille_article » ?

      Ajax_bloc est le nom "ajax" donnée au squelette qui sera mise à jour par le formulaire (via ajax donc). Je t’invite à lire la page de la documentation de SPIP sur l’Ajax. Particulièrement la partie "Rechargement télécommandé de blocs ajax".
      La "grille article" et le squelette qui va être mis à jour par le formulaire.

      Si tu souhaites une démonstration, j’ai mis en ligne un site de démo pour mon squelette Zoundation qui utilise ce mécanisme.

      Je vais voir pour modifier mon article et être plus précis.

      Répondre à ce message
      • Recherche ajax avec les formulaires SPIP

        Le 28 janvier à 20:55 par Thomas

        Oh et bien merci surtout à toi..)) D’autant que la galaxie Spip n’aborde pas vraiment la question de mettre en place sur un même emplacement de page un formulaire de recherche + résultats dynamiques... Très étonnamment dirais-je (ou alors c’est très très caché...?))) car c’est me semble-t-il un besoin peu rare. Certes le plugin ’Recherche avancée’ propose finalement aussi cela mais pas aussi simplement (et de plus il faut savoir que la dernière version, pour Spip 2... est fonctionnelle sur Spip 3 moyennant modif du xml). Enfin la documentation Spip ne semble pas envisager ce besoin.

        Merci pour les explicitations de ton développement. Il est compréhensible (pour moi) avec un peu de persévérance mais je me mettais à la place d’autres lecteurs, éventuellement (encore) plus modestes que moi en terme de connaissances Spip et bref.. les ’évidence qui n’en sont pas’ etc. tout ça.

        Alors pour moi le système fonctionne dans la mesure où, dans le formulaire (recherche_ajax.html), on remplace l’id de l’input :
        remplacer
        id=« #ENV_id_champ »
        par
        id=« recherche_#ENVajax_bloc »

        Puisque c’est cet id qui est ensuite visé (cf. d’ailleurs son application sur la page du site de démo que tu as fait).

        Merci encore
        (et je vais regarder de près « Zoundation » bien intéressant !)
        T

        Répondre à ce message
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.