Je recopie ici l'exemple utilisé sur la démo pour la recherche d'actualités
Code :
<row>
<block module="pnews" id="newssearch">
<div class="pnews">
<script type="text/javascript">
var pageURL = '{page:self:url}';
</script>
<form action="{page:self:url}" method="get" class="pnews-form">
<label for="pnews-keyword">Mots Clés : </label><input type="text" class="input-text pnews-keyword search" id="pnews-keyword" name="keyword" value="{request:string:keyword}" />
<input type="submit" class="button pnews-submit" name="submit" value="ok" />
<img class="pnews-loading hide" src="img/demo/common/loading.gif" alt="Chargement ..." />
</form>
</div>
<div class="pnews">
<atm-xml what="{request:string:out} == 'xml'">
<atm-search what="{Actualites}" name="newsresult">
<atm-search-param search="newsresult" type="keywords" value="{request:string:keyword}" mandatory="false" />
<atm-search-param search="newsresult" type="item" value="{request:int:item}" mandatory="false" />
<atm-search-limit search="newsresult" value="10" />
<atm-search-page search="newsresult" value="{request:int:page}" />
<atm-search-order search="newsresult" type="publication date start" direction="desc" />
<atm-result search="newsresult">
<atm-if what="{firstresult}">
<atm-start-tag tag="div" class="pnews-results" />
</atm-if>
<atm-if what="{firstresult} && !{request:int:item}">
<div class="pnews-results-count">{maxresults} résultat(s) pour votre recherche.</div>
</atm-if>
<div class="pnews-result">
<h2><a href="{page:self:url}?item={Actualites:id}" title="{Actualites:label}">{Actualites:label}</a></h2>
<p class="date">{Actualites:formatedDateStart|d/m/Y}</p>
<atm-if what="{Actualites:Media:id}">
<div class="right">
<atm-if name="oembed" what="{Actualites:Media:Media_externe:hasValue}">
<div class="pmedia-oembed">{Actualites:Media:Media_externe:html|320,250}</div>
<atm-if what="{Actualites:Media:Media_externe:type} != 'link' && ({Actualites:Media:Media_externe:authorName} || {Actualites:Media:Media_externe:title})">
<div class="pmedia-oembed-legend">
<atm-if name="oembedTitle" what="{Actualites:Media:Media_externe:url} && {Actualites:Media:Media_externe:title}">
<a href="{Actualites:Media:Media_externe:url}" target="_blank">{Actualites:Media:Media_externe:title}</a>
</atm-if>
<atm-else for="oembedTitle" what="{Actualites:Media:Media_externe:title}">
{Actualites:Media:Media_externe:title}
</atm-else>
<atm-if what="{Actualites:Media:Media_externe:authorName} && {Actualites:Media:Media_externe:title}"> - </atm-if>
<atm-if name="oembedAuthor" what="{Actualites:Media:Media_externe:authorName} && {Actualites:Media:Media_externe:authorUrl}">
<a href="{Actualites:Media:Media_externe:authorUrl}" target="_blank">{Actualites:Media:Media_externe:authorName}</a>
</atm-if>
<atm-else for="oembedAuthor" what="{Actualites:Media:Media_externe:authorName}">
{Actualites:Media:Media_externe:authorName}
</atm-else>
</div>
</atm-if>
</atm-if>
<atm-else for="oembed">
<atm-if what="{Actualites:Media:Fichier:filename} && {Actualites:Media:Fichier:fileExtension} && {Actualites:Media:Fichier:fileExtension} != 'flv' && {Actualites:Media:Fichier:fileExtension} != 'mp3' && {Actualites:Media:Fichier:fileExtension} != 'jpg' && {Actualites:Media:Fichier:fileExtension} != 'gif' && {Actualites:Media:Fichier:fileExtension} != 'png'">
<a href="{Actualites:Media:Fichier:file}" target="_blank" title="Télécharger le document '{Actualites:Media:label}' ({Actualites:Media:Fichier:fileExtension} - {Actualites:Media:Fichier:fileSize}Mo)"><atm-if what="{Actualites:Media:Fichier:fileIcon}"><img src="{Actualites:Media:Fichier:fileIcon}" alt="Fichier {Actualites:Media:Fichier:fileExtension}" /></atm-if> {Actualites:Media:label}</a>
<atm-if what="{Actualites:Media:Fichier:thumbname}">
<img src="{Actualites:Media:Fichier:thumb|200}" alt="{Actualites:Media:label}" />
</atm-if>
</atm-if>
<atm-if what="{Actualites:Media:Fichier:fileExtension} == 'flv'">
<atm-if what="{Actualites:Media:Fichier:thumbname}">
<script type="text/javascript">
swfobject.embedSWF('automne/playerflv/player_flv.swf', 'media-{Actualites:Media:id}', '320', '200', '9.0.0', 'automne/swfobject/expressInstall.swf', {flv:'{Actualites:Media:Fichier:file}', configxml:'automne/playerflv/config_playerflv.xml', startimage:'{Actualites:Media:Fichier:thumb}'}, {allowfullscreen:true, wmode:'transparent'}, {'style':'float:right;'});
</script>
</atm-if>
<atm-if what="!{Actualites:Media:Fichier:thumbname}">
<script type="text/javascript">
swfobject.embedSWF('automne/playerflv/player_flv.swf', 'media-{Actualites:Media:id}', '320', '200', '9.0.0', 'automne/swfobject/expressInstall.swf', {flv:'{Actualites:Media:Fichier:file}', configxml:'automne/playerflv/config_playerflv.xml'}, {allowfullscreen:true, wmode:'transparent'}, {'style':'float:right;'});
</script>
</atm-if>
<div id="media-{Actualites:Media:id}" class="pmedia-video" style="width:320px;height:200px;">
<p><a href="http://www.adobe.com/go/getflashplayer" target="_blank"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
</atm-if>
<atm-if what="{Actualites:Media:Fichier:fileExtension} == 'mp3'">
<script type="text/javascript">
swfobject.embedSWF('automne/playermp3/player_mp3.swf', 'media-{Actualites:Media:id}', '200', '20', '9.0.0', 'automne/swfobject/expressInstall.swf', {mp3:'{Actualites:Media:Fichier:file}', configxml:'automne/playermp3/config_playermp3.xml'}, {wmode:'transparent'}, {'style':'float:right;'});
</script>
<div id="media-{Actualites:Media:id}" class="pmedia-audio" style="width:320px;height:20px;">
<p><a href="http://www.adobe.com/go/getflashplayer" target="_blank"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>
<atm-if what="{Actualites:Media:Fichier:thumbname}">
<img src="{Actualites:Media:Fichier:thumb|200}" alt="{Actualites:Media:label}" />
</atm-if>
</atm-if>
<atm-if what="{Actualites:Media:Fichier:fileExtension} == 'jpg' || {Actualites:Media:Fichier:fileExtension} == 'gif' || {Actualites:Media:Fichier:fileExtension} == 'png'">
<atm-if what="{Actualites:Media:Fichier:thumbname}">
<a href="{Actualites:Media:Fichier:file}" rel="atm-enlarge" target="_blank" title="Illustration '{Actualites:Media:label}' ({Actualites:Media:Fichier:fileExtension} - {Actualites:Media:Fichier:fileSize}Mo)"><img src="{Actualites:Media:Fichier:thumb|200}" alt="{Actualites:Media:label}" /></a>
</atm-if>
<atm-if what="!{Actualites:Media:Fichier:thumbname}">
<a href="{Actualites:Media:Fichier:file}" rel="atm-enlarge" target="_blank" title="Illustration '{Actualites:Media:label}' ({Actualites:Media:Fichier:fileExtension} - {Actualites:Media:Fichier:fileSize}Mo)"><img src="{Actualites:Media:Fichier:file|200}" alt="{Actualites:Media:label}" /></a>
</atm-if>
</atm-if>
</atm-else>
</div>
</atm-if>
<atm-if what="{request:int:item} == {Actualites:id}">
{Actualites:Introduction:htmlvalue}
{Actualites:Texte:htmlvalue}
<p><a href="{page:self:url}">Retour aux actualités</a></p>
</atm-if>
<atm-if what="!{request:int:item}">
{Actualites:Introduction:htmlvalue}
<a href="{page:self:url}?item={Actualites:id}" title="Lire la suite de l'actualité '{Actualites:label}'">
Lire la suite ...
</a>
</atm-if>
<div class="clear"></div>
</div>
<atm-if what="{resultcount}>10 && {lastresult} && !{request:int:item}">
<div class="pnews-pages">
<atm-function function="pages" maxpages="{maxpages}" currentpage="{currentpage}" displayedpage="5">
<pages><a href="{page:self:url}?keyword={request:string:keyword}&page={n}">{n}</a> </pages>
<currentpage><strong>{n}</strong> </currentpage>
<previous><a href="{page:self:url}?keyword={request:string:keyword}&page={n}">Page précédente</a> </previous>
<next><a href="{page:self:url}?keyword={request:string:keyword}&page={n}">Page suivante</a> </next>
</atm-function>
</div>
</atm-if>
<atm-if what="{lastresult}">
<atm-end-tag tag="div" />
</atm-if>
</atm-result>
<atm-noresult search="newsresult">
<div class="pnews-results">Aucun résultat trouvé pour votre recherche ...</div>
</atm-noresult>
</atm-search>
</atm-xml>
</div>
</block>
</row>
Et le fichier /js/modules/pnews/demo.js
Code :
$(document).ready(function(){
var search = function () {
if ($('#pnews-keyword').val() && $('#pnews-keyword').val().length < 3) {
return false;
}
$.ajax({
type: "GET",
url: pageURL,
data: 'out=xml&keyword=' + $('#pnews-keyword').val(),
success: displaySearch
});
return true;
}
var getPage = function (e) {
var href = $(e.target).is('a') ? $(e.target).attr("href") : $(e.target).parent('a').attr("href");
if (href) {
e.preventDefault();
$.ajax({
type: "GET",
url: href,
data: 'out=xml',
success: displaySearch
});
return false;
}
return true;
}
var displaySearch = function (xmlcontent) {
if (xmlcontent.getElementsByTagName('data').length > 0) {
$('.pnews-results').replaceWith(xmlcontent.getElementsByTagName('data').item(0).firstChild.nodeValue);
if ($('.pnews-pages').length > 0) {
$('.pnews-pages a').click(getPage);
}
//colorbox on results
var images = $("a[rel='atm-enlarge']");
if (images.length > 0) {
images.colorbox({
photo: true
});
}
}
return true;
}
$(".pnews-loading").ajaxStart(function(){
$(this).show();
});
$(".pnews-loading").ajaxStop(function(){
$(this).hide();
});
$('.pnews-submit').hide();
$('#pnews-keyword').keyup(search);
if ($('.pnews-pages').length > 0) {
$('.pnews-pages a').click(getPage);
}
});