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 :
    Site perso de Frédéric Leroy (ingénieur R&D à Sophia Antipolis) dont les contenus sont principalement orientés économie, finance et informatique financière


    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, 21h18
    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)
    Mon blog, on y parle Docker, PHP, WSL, Markdown et plein d'autres choses : https://www.avonture.be
    Logiciel gratuit de scan antivirus : https://github.com/cavo789/aesecure_quickscan (plus de 45.000 virus détectés, 700.000 fichiers sur liste blanche)​

    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, 22h47
      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)
        Mon blog, on y parle Docker, PHP, WSL, Markdown et plein d'autres choses : https://www.avonture.be
        Logiciel gratuit de scan antivirus : https://github.com/cavo789/aesecure_quickscan (plus de 45.000 virus détectés, 700.000 fichiers sur liste blanche)​

        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 :
          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 :
            Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.


            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 ...
            Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

            Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

            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 :
              MooTools Core Repository. Contribute to mootools/mootools-core development by creating an account on GitHub.


              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 :
                  Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.


                  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
                  Aucune annonce pour le moment.

                  Partenaire de l'association

                  Réduire

                  Hébergeur Web PlanetHoster
                  Travaille ...
                  X