Tweet
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 :
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 :
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 :
Si l'on doit retourner une erreur :
Retour normal des résultats de recherche :
$results est un tableau d'objets standards Php :
L'objet $result contient 3 proprités :
Une fois le tableau $response complété, on l'encode au format json :
et on le renvoie au navigateur avec les headers http qui vonts biens...
Les commentaires constructifs sont les bienvenus.
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 :
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 > </a> <div id="mod_extsearch_counter" style="display: none;"></div> <a href="#" id="mod_extsearch_prev" style="display: none;" > < 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();
Code PHP:
$objSearch->type = 'error';
$objSearch->value = <code de l'erreur (entier)>;
Code PHP:
$objSearch->type = 'count';
$objSearch->value = <# de résultats total (entier)>;
$objSearch->results = $results;
Code PHP:
$results = array();
$result = new stdClass();
$results[] = $result;
Code PHP:
$result->href = <url sef de la page>;
$result->text = <extrait du texte de la page>;
$result->title = <titre de la page>;
Code PHP:
$return = json_encode($response);
Les commentaires constructifs sont les bienvenus.
Commentaire