Skip to main content
Voir en Markdown

Composants de recherche

Là où les tables déclarent ce qui est cherchable et où les moteurs déclarent comment une requête s'exécute (voir search-overview), les composants sont l'endroit où la recherche apparaît sur la page. Sovrium fournit quatre pièces complémentaires : un searchInput qui pilote une requête, une list qui affiche les résultats, un pageSearch qui indexe le contenu des pages statiques, et la recherche de barre d'outils intégrée aux composants de données.

Composant Objectif
searchInput Champ de recherche autonome qui pilote un autre composant via dataSource.bindTo.
list Affichage de résultats orienté recherche avec modèles d'élément, surlignage et pagination.
pageSearch Recherche statique à l'échelle du site sur le contenu des pages publiques (index au build/démarrage).
recherche de barre d'outils Barre de recherche intégrée au composant sur data-table, kanban, calendrier, etc.

searchInput

Un champ de recherche autonome. Seul, il affiche une saisie accessible ; lié à une source de données, il devient le pilote de requête pour un composant frère. Associez-le à une list (ou data-table) dont la source de données définit bindTo sur le props.id de la saisie.

Propriété Description
props.id Identifiant que les autres composants référencent via dataSource.bindTo.
visibility Contrôles de visibilité standard (partagés entre composants).
i18n Champs d'internationalisation standard (libellé/placeholder traduisibles).
app.yaml
components:
  # 1. The input drives the query
  - type: searchInput
    props: { id: product-query }

  # 2. The list consumes it via bindTo
  - type: list
    dataSource:
      table: products
      mode: search
      searchFields: [name, description]
      searchEngine: hybrid
      debounceMs: 300
      bindTo: product-query
    listDisplay:
      itemTemplate:
        title: '$record.name'
        subtitle: '$record.description'
      highlight: true

list — affichage de résultats

Le composant list est conçu comme un affichage orienté recherche : le compagnon naturel de searchInput. Il affiche chaque enregistrement via un modèle d'élément avec surlignage optionnel, séparateurs et pagination « charger plus ».

Propriété Description
itemTemplate.title Texte principal via une référence $record.* (par ex. $record.name).
itemTemplate.subtitle Texte secondaire (par ex. $record.description).
itemTemplate.image URL d'image (par ex. $record.thumbnail).
itemTemplate.badge Texte de badge (par ex. $record.category).
itemTemplate.metadata Tableau de { field, format } affiché dans le pied de l'élément (currency, relative-date, badge, text, short-date).
emptyMessage Message affiché lorsqu'aucun résultat ne correspond.
loadMore button (bouton Charger plus) ou infinite (charger au défilement).
highlight Booléen. Surligne les termes de recherche correspondants dans le texte de l'élément (par défaut false).
divider Booléen. Affiche des séparateurs visuels entre les éléments (par défaut false).
maxItems Nombre maximal d'éléments à afficher (entier ≥ 1).
app.yaml
- type: list
  dataSource:
    table: products
    mode: search
    searchFields: [name, description]
    bindTo: product-query
  listDisplay:
    itemTemplate:
      title: '$record.name'
      subtitle: '$record.description'
      image: '$record.thumbnail'
      badge: '$record.category'
      metadata:
        - field: price
          format: currency
    emptyMessage: No products found
    loadMore: infinite
    highlight: true
    divider: true
    maxItems: 50

pageSearch — index de pages statiques

Un composant de recherche à l'échelle du site qui indexe les pages publiques (access absent ou access: 'all') au moment de sovrium build et au démarrage de sovrium start. L'index est un fichier JSON plus un minuscule runtime client sous <outputDir>/sovrium-search/, servi par la route de répertoire public. C'est une couche différente de la recherche d'enregistrements — il recherche le contenu des pages, pas les lignes de table.

Propriété Description
placeholder Texte indicatif affiché dans la saisie de recherche.
maxResults Nombre maximal de résultats à afficher (entier positif).
visibility Contrôles de visibilité standard.
i18n Champs d'internationalisation standard.
app.yaml
pages:
  - id: home
    name: home
    path: /
    components:
      - type: pageSearch
        placeholder: Search the site...
        maxResults: 10

Recherche de barre d'outils

Les composants de données exposent une barre de recherche intégrée au composant via leur barre d'outils. Sur un data-table, définissez toolbar.search: true pour afficher une saisie de recherche globale sur les lignes liées — un filtre rapide sans searchInput distinct.

Indicateur de barre d'outils Description
search Affiche la saisie de recherche globale.
filters Affiche le constructeur de filtres.
sort Affiche le constructeur de tri.
app.yaml
- type: data-table
  dataSource:
    table: orders
    mode: search
    searchFields: [customer, reference]
  toolbar:
    search: true
    filters: true
    sort: true

Les composants kanban et calendrier partagent une configuration search pour leur propre barre de recherche intégrée via le même modèle.

Surlignage et anti-rebond

  • Surlignage — définissez highlight: true sur list (listDisplay.highlight) pour entourer les termes correspondants dans le texte des résultats. Désactivé par défaut.
  • Anti-rebond — définissez debounceMs sur la source de données (par ex. 300) afin que la requête ne se déclenche qu'après une pause de saisie de l'utilisateur, évitant une requête par frappe.

Ces fonctionnalités fonctionnent ensemble : un searchInput émet des frappes, la source de données liée anti-rebondit et interroge, et la list surligne les correspondances dans les résultats affichés.

Associé

Dernière mise à jour 11 août 2026

Modifier cette pageSignaler un problème

Cette documentation a été rédigée avec de l'IA : des erreurs ou du contenu obsolète sont donc possibles. Sovrium est en bêta. Les contributions et corrections sont les bienvenues.

Construit avec Sovrium