Classe MooTools pour Recherche Asynchrone (Ajax)

Réduire
X
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Classe MooTools pour Recherche Asynchrone (Ajax)

    EDIT 27/11/2011 : Ajout des infos nécessaires à l'implémentation côté serveur


    Bonjour,
    J'ai créé un plugin Mootools v1.2 qui permet de déclencher la recherche automatiquement en asynchrone (ajax) au fur et à mesure que l'on tappe les mots clés et affiche les résultats de recherche directement au niveau du module sous la forme d'une liste de liens.

    Il est utilisé dans le module de recherche en haut à droite sur mon site :
    http://www.fly06.fr/

    Ce plugin est constitué de trois classes liées entre elles par héritage :
    1 - ajaxLiveSearch : renvoie le nombre total de résultats trouvés uniquement
    2 - ajaxLiveSearchWithResults : (1) + affichage des x premiers résultats
    3 - ajaxLiveSearchWithResultsAndNav : (2) + navigation à travers tous les résultats

    Le code de ces trois classes est dans le fichier js zippé ci-joint : ajaxlivesearch.js.zip.

    L'implémentation a un impact côté client (html, css, js) mais aussi côté serveur (php).

    Implémentation côté client

    Voici à titre d'exemple le code html, css et js utilisés sur mon site, dans l'ordre :

    Code HTML:
    <div class="mod_extsearch">
    
    	<div id="mod_extsearch_btnclose"></div>
    
    	<!-- Form -->
    	<form action="index.php" method="post">
    
    		<input name="searchword" id="mod_extsearch_searchword" maxlength="30" alt="GO" autocomplete="off" class="inputbox" type="text" size="30" value="search..." />
    
    		<input type="submit" style="display: block;" id="mod_extsearch_button" value="GO" class="button" />
    
    		<input type="hidden" name="task"   value="search" />
    		<input type="hidden" name="option" value="com_external_search" />
    		<input type="hidden" name="Itemid" value="148" />
    
    	</form>	
    
    	<!-- Loading Gif -->
    	<div id="mod_extsearch_loading" style="display: none;">
    		<img src="/modules/mod_external_search_reloaded/ajax/ajax.gif" width="43" height="11" />
    	</div>
    
    	<!-- Message -->	
    	<div id="mod_extsearch_msg" style="display: none;"></div>
    
    	<!-- Results -->
    	<ul id="mod_extsearch_results" style="display: none;"></ul>
    
    	<!-- Navigation -->
    	<div id="mod_extsearch_nav">
    		<a href="#" id="mod_extsearch_next" style="display: none;" >
    			Next&nbsp;&gt;	
    		</a>
    		<div id="mod_extsearch_counter" style="display: none;"></div>
    		<a href="#" id="mod_extsearch_prev" style="display: none;" >
    			&lt;&nbsp;Prev	
    		</a>
    		<hr class="separation" />
    	</div>
    
    
    </div>
    Code:
    /* External Search Reloaded Module */
    /* Author: Fly06                   */
    .mod_extsearch {
    	position: relative;
    	padding: 15px 0;
    	width: 300px; 
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
    	background-color: #c6c3ff;
    	margin-bottom: 20px;
    }
    .mod_extsearch input#mod_extsearch_searchword,
    .mod_extsearch div#mod_extsearch_loading,
    .mod_extsearch div#mod_extsearch_msg,
    .mod_extsearch input#mod_extsearch_button {
    	width: 250px; 
    	margin:0 auto; 
    	display: block; 
    }
    .mod_extsearch input#mod_extsearch_button {
    	width: 254px;
    }
    .mod_extsearch div#mod_extsearch_loading,
    .mod_extsearch div#mod_extsearch_msg {
    	text-align: right;
    	margin-top: 5px;
    	padding: 0;
    	height: 15px;
    }
    .mod_extsearch div#mod_extsearch_loading {
    	margin-top: 7px;
    	height: 13px;
    }
    .mod_extsearch ul#mod_extsearch_results {
    	margin-top: 7px;
    }
    .mod_extsearch div#mod_extsearch_counter {
    	float: left;
    }
    .mod_extsearch a#mod_extsearch_prev,
    .mod_extsearch a#mod_extsearch_next {
    	float: right;
    }
    .mod_extsearch div#mod_extsearch_nav {
    	margin: 5px 25px 0 25px;
    }
    .mod_extsearch a#mod_extsearch_prev {
    	margin-right: 3px;
    }
    .mod_extsearch .separation {
    	clear: both;
    	visibility: hidden;
    }
    .mod_extsearch #mod_extsearch_btnclose {
    	cursor:		pointer;
    	display: 	none;
    	position:	absolute;
    	width:		14px;
    	height:		14px;
    	right:		-7px;
    	top:		-7px;
    	background:	url(../images/closebox.jpg) no-repeat top left;
    	border:		none;
    }
    Code:
    window.addEvent('domready', function(){
    	$('mod_extsearch_searchword').addEvent('blur', function() {
    		if ($('mod_extsearch_searchword').value == '') {
    			$('mod_extsearch_button').setStyle('display', 'block');
    			$('mod_extsearch_btnclose').setStyle('display', 'none');
    		}
    	});
    	var myAjaxLiveSearch = new ajaxLiveSearchWithResultsAndNav(
    		'mod_extsearch_counter',
    		'mod_extsearch_next',
    		'mod_extsearch_prev',
    		'mod_extsearch_results',
    		'mod_extsearch_searchword',
    		'mod_extsearch_msg',
    		'mod_extsearch_loading',
    		'http://localhost/Sites_web/perso/fly06_fr/modules/mod_external_search_reloaded/ajax/ajax.php?', {
    		'limitResults': 5,
    		'msgServerNoResultFound': 'Aucun résultat trouvé',
    		'msgServerOneResultFound': 'Un seul résultat trouvé',
    		'msgServerSeveralResultsFound': '{total} résultats trouvés au total',
    		'msgServerError': {
    			1: 'Aucun mot clé saisi !',
    			2: 'Chaîne trop longue ou trop courte !',
    			3: 'Mots clés trop courts et/ou non valides !',
    		},
    		'msgResultsCounter': 'Résultats : {from} - {to}',
    		'onShowMsg': Array
    	});
    	$('mod_extsearch_searchword').addEvent('keyup', function(event) {
    		if(event.key == "enter") {
    			$('mod_extsearch_button').setStyle('display', 'none');
    			$('mod_extsearch_btnclose').setStyle('display', 'none');
    			$('mod_extsearch_searchword').setStyle('background-image', 'url("/Sites_web/perso/fly06_fr/modules/mod_external_search_reloaded/ajax/ajax.gif")');
    			$('mod_extsearch_searchword').setStyle('background-repeat', 'no-repeat');
    			$('mod_extsearch_searchword').setStyle('background-position', 'right center');
    		} else if ($('mod_extsearch_btnclose').getStyle('display') == 'none') {
    			$('mod_extsearch_btnclose').setStyle('display', 'block');
    		}
    	});
    	$('mod_extsearch_btnclose').addEvent('click', function() {
    		myAjaxLiveSearch.ajaxRequest.cancel();
    		myAjaxLiveSearch.hide();
    		$('mod_extsearch_searchword').value = myAjaxLiveSearch.options.defaultSearchText;
    		$('mod_extsearch_button').setStyle('display', 'block');
    		$('mod_extsearch_btnclose').setStyle('display', 'none');
    	});
    	$('mod_extsearch_button').addEvent('click', function() {
    			$('mod_extsearch_searchword').setStyle('background-image', 'url("/Sites_web/perso/fly06_fr/modules/mod_external_search_reloaded/ajax/ajax.gif")');
    			$('mod_extsearch_searchword').setStyle('background-repeat', 'no-repeat');
    			$('mod_extsearch_searchword').setStyle('background-position', 'right center');
    			$('mod_extsearch_btnclose').setStyle('display', 'none');
    			$('mod_extsearch_button').setStyle('display', 'none');
    			myAjaxLiveSearch.ajaxRequest.cancel();
    			myAjaxLiveSearch.hide();
    	});
    });

    Implémentation côté serveur

    Côté serveur, il faut écrire un fichier php de traitement des requêtes ajax générées par le plugin, la réponse doit être format json (plus details à suivre sur ce point).

    On retourne un tableau indexé contenant deux éléments :
    Code PHP:
    $response = array(
            
    // Le ou les mot clés cherchés
            
    'searchword' => $searchword
            
    // Le conteneur principal des résultats de recherche
            
    'objSearch' => $objSearch
        
    );

    $objSearch est un objet standard Php
    $objSearch 
    = new stdClass(); 
    Si l'on doit retourner une erreur :
    Code PHP:
    $objSearch->type 'error';
    $objSearch->value = <code de l'erreur (entier)>; 
    Retour normal des résultats de recherche :
    Code PHP:
    $objSearch->type 'count';
    $objSearch->value = <# de résultats total (entier)>;
    $objSearch->results $results
    $results est un tableau d'objets standards Php :
    Code PHP:
    $results = array();
    $result = new stdClass();
    $results[] = $result
    L'objet $result contient 3 proprités :
    Code PHP:
    $result->href = <url sef de la page>;
    $result->text = <extrait du texte de la page>;
    $result->title = <titre de la page>; 
    Une fois le tableau $response complété, on l'encode au format json :
    Code PHP:
    $return json_encode($response); 
    et on le renvoie au navigateur avec les headers http qui vonts biens...

    Les commentaires constructifs sont les bienvenus.
    Dernière édition par Fly06_Fr à 27/11/2011, 20h18
    Fly06_Fr (http://www.fly06.fr/)
    -------------------------------------------
    Classe MooTools pour Recherche Asynchrone (Ajax) : http://forum.joomla.fr/showthread.ph...one-%28Ajax%29

  • #2
    Re : Classe MooTools pour Recherche Asynchrone (Ajax)

    Salut Fly06.

    Merci pour le partage; nul doute que cela sera bien utile à plus d'une personne.

    Par curiosité, j'ai voulu le voir en action sur ton site et, sans le vouloir, j'ai immédiatement cliqué sur le bouton pour lancer la recherche; sans avoir tapé un mot donc. Et patatra, page 403 (http://www.fly06.fr/external-search/...archphrase=all).

    En tapant un mot clef, là, cela fonctionne et c'est vraiment très pratique.

    Beau développement !
    Christophe (cavo789)
    Développeur d'aeSecure; protection, optimisation et nettoyage (après hack) de sites web Apache https://www.aesecure.com/fr
    Développeur de marknotes, logiciel de gestion de prises de notes avec interface web et de multiples convertisseur https://github.com/cavo789/marknotes

    Commentaire


    • #3
      Re : Classe MooTools pour Recherche Asynchrone (Ajax)

      Envoyé par cavo789 Voir le message
      Par curiosité, j'ai voulu le voir en action sur ton site et, sans le vouloir, j'ai immédiatement cliqué sur le bouton pour lancer la recherche; sans avoir tapé un mot donc. Et patatra, page 403 (http://www.fly06.fr/external-search/...archphrase=all).
      Bizarrement je n'avais pas cliqué sur le bouton sans avoir modifié le texte par défaut, trop simple probablement

      C'est corrigé (un filtre du htaccess de Sirius à commenter).

      Merci de m'avoir signalé ce problème.
      Dernière édition par Fly06_Fr à 15/11/2011, 21h47
      Fly06_Fr (http://www.fly06.fr/)
      -------------------------------------------
      Classe MooTools pour Recherche Asynchrone (Ajax) : http://forum.joomla.fr/showthread.ph...one-%28Ajax%29

      Commentaire


      • #4
        Re : Classe MooTools pour Recherche Asynchrone (Ajax)

        Envoyé par Fly06_Fr Voir le message
        Bizarrement je n'avais pas cliqué sur le bouton sans avoir modifié le texte par défaut, trop simple probablement
        C'est pour cette raison qu'il faut des utilisateurs de test; le programmeur ne pense jamais à ça, il sait ce qu'il faut faire pour que ça fonctionne et il le fait. Il doit se torturer l'esprit pour tenter de reproduire ce qu'un quidam fera; parfois il y arrive; pas toujours totalement
        Christophe (cavo789)
        Développeur d'aeSecure; protection, optimisation et nettoyage (après hack) de sites web Apache https://www.aesecure.com/fr
        Développeur de marknotes, logiciel de gestion de prises de notes avec interface web et de multiples convertisseur https://github.com/cavo789/marknotes

        Commentaire


        • #5
          Re : Classe MooTools pour Recherche Asynchrone (Ajax)

          Pour info, j'ai intégré en prod le custom event 'whileClick' (Mootools).

          Il permet de gérer le "click prolongé" et ne plus avoir à cliquer plusieurs fois sur un lien next/prev pour faire défiler les résultats de recherche.

          Le script est disponible sur le site de l'auteur pour ceux que ça intéresseraient :
          http://youssef.boubia.com/index.php/...s-whileclickjs
          Fly06_Fr (http://www.fly06.fr/)
          -------------------------------------------
          Classe MooTools pour Recherche Asynchrone (Ajax) : http://forum.joomla.fr/showthread.ph...one-%28Ajax%29

          Commentaire


          • #6
            Re : Classe MooTools pour Recherche Asynchrone (Ajax)

            Salut,
            super boulot.
            Cependant, je remarque que tu as developpé tes classes avec Mootools 1.2.5.
            Avec Moo 1.3.x (joomla 1.7) et Moo 1.4.x (peut-être Joomla 2.0) , il peut y avoir des soucis.

            Par exemple, j'ai regardé le script whileclick, qui ne fonctionne pas avec les versions les + récentes.
            Il ne faut pas grand chose, seulement de petites réécritures au bon endroit.
            Je propose une correction/mise à jour - qui fonctionne avec 1.4.1 compat et pas compat :
            http://jsfiddle.net/ghazal/rEvQs/

            Corrections ici :
            /******************* Mootools Patch *******************/
            Element.Events.whileClick = {
            base: 'mousedown',
            add: {
            call: function (element,fn) {
            new whileClick( element, fn ); }
            }
            };
            Element.NativeEvents['whileClick'];

            PS : j'ai repris la liste officielle des changements de 1.2 à 1.3 (avec qq rajouts pour mon usage perso), si ca peut aider ...
            http://jsfiddle.net/9eUq7/2/show/
            “Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

            Commentaire


            • #7
              Re : Classe MooTools pour Recherche Asynchrone (Ajax)

              Salut Ghazal,
              Envoyé par ghazal Voir le message
              Cependant, je remarque que tu as developpé tes classes avec Mootools 1.2.5.
              Avec Moo 1.3.x (joomla 1.7) et Moo 1.4.x (peut-être Joomla 2.0) , il peut y avoir des soucis.
              Oui c'est effectivement codé pour du MooTools v1.2. car mon site est en "J1.5-Mootools Upgrade".

              Je n'ai pas encore regardé vraiment MooTools 1.3 mais le tuto ci-dessous me laisse penser que l'upgrade ne devrait poser de problème particulier :
              https://github.com/mootools/mootools...rom-1.2-to-1.3

              Envoyé par ghazal Voir le message
              Je propose une correction/mise à jour - qui fonctionne avec 1.4.1 compat et pas compat :
              http://jsfiddle.net/ghazal/rEvQs/
              L'exemple de l'auteur que tu as repris sur jsfiddle ne fonctionne pas.

              Le click fonctionne mais plus le whileClick !

              Envoyé par ghazal Voir le message
              PS : j'ai repris la liste officielle des changements de 1.2 à 1.3 (avec qq rajouts pour mon usage perso), si ca peut aider ...
              http://jsfiddle.net/9eUq7/2/show/
              Merci ça peut servir effectivement.

              Par contre ça aurait été bien d'indiquer tes ajouts persos par rapport à la liste officielle.

              Fly06_Fr (http://www.fly06.fr/)
              -------------------------------------------
              Classe MooTools pour Recherche Asynchrone (Ajax) : http://forum.joomla.fr/showthread.ph...one-%28Ajax%29

              Commentaire


              • #8
                Re : Classe MooTools pour Recherche Asynchrone (Ajax)

                Pour info, j'ai ajouté au post initial la description de la réponse serveur (php).
                Fly06_Fr (http://www.fly06.fr/)
                -------------------------------------------
                Classe MooTools pour Recherche Asynchrone (Ajax) : http://forum.joomla.fr/showthread.ph...one-%28Ajax%29

                Commentaire


                • #9
                  Re : Classe MooTools pour Recherche Asynchrone (Ajax)

                  Envoyé par ghazal Voir le message
                  Je propose une correction/mise à jour - qui fonctionne avec 1.4.1 compat et pas compat :
                  http://jsfiddle.net/ghazal/rEvQs/
                  @Ghazal :

                  J'ai testé le script d'origine pour moo 1.2 sans rien changer et ça fonctionne parfaitement avec moo 1.4.1 compat :
                  http://jsfiddle.net/Fly06/cSyE9/

                  C'est juste pour ton info car le portage vers moo 1.3/1.4 n'est pas encore dans ma to-do-list.

                  Fly06_Fr (http://www.fly06.fr/)
                  -------------------------------------------
                  Classe MooTools pour Recherche Asynchrone (Ajax) : http://forum.joomla.fr/showthread.ph...one-%28Ajax%29

                  Commentaire

                  Annonce

                  Réduire
                  1 sur 2 < >

                  C'est [Réglé] et on n'en parle plus ?

                  A quoi ça sert ?
                  La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                  Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                  Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                  Comment ajouter la mention [Réglé] à votre discussion ?
                  1 - Aller sur votre discussion et éditer votre premier message :


                  2 - Cliquer sur la liste déroulante Préfixe.

                  3 - Choisir le préfixe [Réglé].


                  4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                  2 sur 2 < >

                  Assistance au forum - Outil de publication d'infos de votre site

                  Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                  Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                  Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                  UTILISER À VOS PROPRES RISQUES :
                  L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                  Problèmes connus :
                  FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                  Installation :

                  1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                  Archive zip : https://github.com/AFUJ/FPA/zipball/master

                  2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                  3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                  4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                  5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                  6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                  et remplacer www. votresite .com par votre nom de domaine


                  Exemples:
                  Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                  Télécharger le script fpa-fr.php dans: /public_html/
                  Pour executer le script: http://www..com/fpa-fr.php

                  Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                  Télécharger le script fpa-fr.php dans: /public_html/cms/
                  Pour executer le script: http://www..com/cms/fpa-fr.php

                  En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                  Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                  Voir plus
                  Voir moins
                  Travaille ...
                  X