Si la charte graphique dispose d'un champ de recherche, il peut être intéressant de lui adjoindre une recherche directe et rapide sur les titres de page (appelé abusivement parfois auto-complétion).
La recherche rapide n'a pas de lien avec la recherche qui a lieu lorsqu'on on valide la recherche.
Par exemple, une recherche rapide des pages peut renvoyer n'importe quelle page du site, alors qu'en validant vous pouvez tomber sur un moteur de recherche de contenus de l'annuaire qui renverra moins de liens.
Mise en place dans la charte graphique
Head
Dans les scripts, importer le template head-fastsearch-script depuis plugin:web://stylesheets/helper/fastsearch.xsl
<xsl:import href="plugin:web://stylesheets/helper/fastsearch.xsl"/>
<head> ... <xsl:call-template name="head-fastsearch-script"/> ... </head>
Body
Exemple
<input type="text" ... data-ametys-fastsearch="page" data-ametys-fastsearch-result-classname-hide="noresult" />
Sur le champ <input> de recherche général (généralement dans l'entête des pages) ajouter les attributs suivants pour activer et configurer la recherche rapide :
|
Attribut |
Obligatoire |
Valeurs |
Description |
|---|---|---|---|
|
data-ametys-fastsearch |
oui |
"page" (par défaut) |
|
|
data-ametys-fastsearch-limit |
non |
Nombre <= 25 |
Nombre de résultats max renvoyés |
|
data-ametys-fastsearch-display |
non |
|
Attribut à afficher.
|
|
data-ametys-fastsearch-result-classname |
non |
ametys-fastsearch-result par défaut |
Classe CSS sur la popup listant les résultats |
|
data-ametys-fastsearch-result-classname-show |
non |
|
Classe CSS sur la popup lorsque elle est affichée. |
|
data-ametys-fastsearch-result-classname-hide |
non |
|
Classe CSS sur la popup lorsque elle est masquée. |
|
data-ametys-fastsearch-throttle-time |
non |
Durée en ms 500 par défaut |
Durée d'attente entre la frappe clavier et le lancement effectif de la recherche. Plus la valeur est faible plus le serveur sera sollicité inutilement au cours de la frappe du visiteur. Plus la valeur est forte plus le visiteur attendra inutilement à la fin de sa frappe. |
Ce sont les règles CSS de la charte graphique qui doivent se charger d'afficher/masquer la popup de résultats.
Soit la classe CSS pointée par data-ametys-fastsearch-result-classname est visible par défaut, et il faut utiliser data-ametys-fastsearch-result-classname-hide pour indiquer une classe CSS qui masquera la popup de résultats.
Soit la classe CSS pointée par data-ametys-fastsearch-result-classname est masquée par défaut, et il faut utiliser data-ametys-fastsearch-result-classname-show pour indiquer une classe CSS qui masquera la popup de résultats.
La personnalisation graphique des résultats
La personnalisation graphique dépend de la version Ametys utilisée
Versions 4.10.0 et inférieures
Pour les versions 4.10.0 ou inférieurs, seuls les classes CSS appliquées aux résultats de recherche peuvent être personnalisées. La structure HTML des résultats de recherche ne peut être modifiée.
Pour définir ces propres CSS rajouter les attributs suivant sur l'input de recherche:
|
Attribut |
Obligatoire |
Valeurs |
Description |
|---|---|---|---|
|
data-ametys-fastsearch-result-ul-classname |
non |
|
Classe CSS sur le <ul> englobant les résultats de recherche |
|
data-ametys-fastsearch-result-li-classname |
non |
|
Classe CSS sur les <li> englobant chaque résultat de recherche |
|
data-ametys-fastsearch-result-link-classname |
non |
|
Classe CSS sur le <a> de chaque résultat de recherche |
|
data-ametys-fastsearch-result-title-classname |
non |
ametys-fastsearch-result-title par défaut |
Classe CSS sur le <span> du champ principal affiché |
|
data-ametys-fastsearch-result-path-classname |
non |
ametys-fastsearch-result-path par défaut |
Classe CSS sur le <span> du chemin du résultat de recherche |
Exemple de code généré
<div class="{{data-ametys-fastsearch-result-classname}} {{data-ametys-fastsearch-result-classname-show|-hide}}" id="..." style="...">
<ul class="{{data-ametys-fastsearch-result-ul-classname}}">
<li class="{{data-ametys-fastsearch-result-li-classname}}">
<a href="..." class="{{data-ametys-fastsearch-result-link-classname}}">
<span class="{{data-ametys-fastsearch-result-title-classname}}">Ma page de <strong>test</strong></span>
<span class="{{data-ametys-fastsearch-result-path-classname}}">test > Test de recherche</span>
</a>
</li>
...
</ul>
</div>Version 4.10.1 ou supérieures
Pour les versions d'Ametys 4.10.1 ou supérieures, le rendu des résultats est régit par la XSL plugin-web/pages/search/fastsearch.xsl qu'il est possible de surcharger dans la charte graphique.
Le code HTML généré par défaut pour les résultats de recherche est le suivant:
<ul data-ametys-fastsearch-role="results" class="ametys-fastsearch-result-ul"> <li class="ametys-fastsearch-result-li"> <a class="ametys-fastsearch-result-link" href="..."> <span data-ametys-fastsearch-role="mark" class="ametys-fastsearch-result-title">Devenez expert <strong>Ametys</strong> !</span> <span class="ametys-fastsearch-result-path">Mon organisation > Actualités</span> </a> </li> </ul>
Pour surcharger ce HTML généré, il suffit de rajouter dans votre charte graphique un fichier services/web/pages/search/fastsearch.xsl
Voici un exemple de surcharge simple, afin de modifier les classes CSS des éléments de résultats et remplacer le chevron de séparation ">" par le caractère "|"
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:import href="plugin:web://pages/search/fastsearch.xsl"/> <xsl:variable name="results-class-name">list-unstyled searchFieldResults__list</xsl:variable> <xsl:variable name="result-class-name">searchFieldResults__list_item</xsl:variable> <xsl:variable name="result-link-class-name">g-font-size-18 color-grey</xsl:variable> <xsl:variable name="result-title-class-name">ametys-fastsearch-result-title</xsl:variable> <xsl:variable name="result-path-class-name">g-font-size-12 color-grey path</xsl:variable> <xsl:template name="path-separator"> <xsl:text> | </xsl:text> </xsl:template> </xsl:stylesheet>
Retour en haut