Quick page search

From Ametys 4.5

If the graphic charter has a search field, it may be useful to add a direct and rapid search on page titles (sometimes mistakenly called auto-completion).

The quick search has no connection with the search that takes place when the search is validated.
For example, a quick search of pages may return any page on the site, whereas validating may lead you to a directory content search engine that will return fewer links.

Head

In scripts, import the head-fastsearch-script template from 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

Example

      <input type="text" ...
               data-ametys-fastsearch="page" 
               data-ametys-fastsearch-result-classname-hide="noresult" />

Sur le champ <input> de recherche ajouter les attributs suivants :

 Attribute

Status

Values

Description 

data-ametys-fastsearch

Mandatory

"page" (default)
  • page put a quick search engine on page titles

data-ametys-fastsearch-limit

 

Nombre <= 25
12 par défaut

Max. number of results returned

data-ametys-fastsearch-display

 

 

Attribute to be displayed.

  • page
    • title
    • long-title (default)

data-ametys-fastsearch-result-classname

 

ametys-fastsearch-result by default

Class CSS on the popup listing the results

data-ametys-fastsearch-result-classname-show

 

 

Class CSS on the popup when it is displayed.
Useful for actually displaying the popup if it's hidden by default.

data-ametys-fastsearch-result-classname-hide

 

 

Class CSS on the popup when it is hidden.
Useful for actually hiding the popup if it is hidden by default.

data-ametys-fastsearch-result-ul-classname

 

 

Classe CSS sur le <ul> englobant les résultats de recherche

data-ametys-fastsearch-result-li-classname

 

 

Classe CSS sur les <li> englobant chaque résultat de recherche

data-ametys-fastsearch-result-link-classname

 

 

Classe CSS sur le <a> de chaque résultat de recherche

data-ametys-fastsearch-result-title-classname

 

ametys-fastsearch-result-title by default

Classe CSS sur le <span> du champ principal affiché

data-ametys-fastsearch-result-path-classname

 

ametys-fastsearch-result-path by default

Classe CSS sur le <span> du chemin du résultat de recherche

data-ametys-fastsearch-throttle-time

 

Time in ms

500 default

Waiting time between keystroke and actual search.

The lower the value, the more the server will be called upon unnecessarily during the visitor's keystroke.

The higher the value, the longer the visitor will have to wait for his keystroke.

The rules CSS of the graphic charter should be used to display/hide the results popup.

Either the CSS class pointed to by data-ametys -fastsearch-result-classname is visible by default, and you must use data-ametys -fastsearch-result-classname-hide to indicate a CSS class that will hide the results popup.

Or the CSS class pointed to by data-ametys -fastsearch-result-classname is hidden by default, and you need to use data-ametys-fastsearch-result-classname-show to indicate a CSS class that will hide the results popup.

Example of generated code

<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 &gt; Test de recherche</span>
   </a>
 </li>
 ...
 </ul>
</div>
Back to top

Setup and integration manual