dsfr-data-search - Composants

Composant visuel intermediaire qui affiche un champ de recherche DSFR et filtre les donnees en amont avant de les redistribuer aux composants en aval.

Visuel et intermediaire : Ce composant affiche un champ de recherche ET redistribue les donnees filtrees aux composants en aval via le systeme d'evenements. Il se combine naturellement avec dsfr-data-facets.

Position dans le pipeline

dsfr-data-source → dsfr-data-normalize → dsfr-data-search → dsfr-data-facets → dsfr-data-display / dsfr-data-list

La recherche reduit le jeu de donnees, les facettes affinent ensuite. Les compteurs de facettes se recalculent dynamiquement.

Cas d'usage

Recherche textuelle : filtrer des cartes, tableaux ou graphiques par texte libre
Recherche + facettes : combiner recherche textuelle et filtres categoriques
KPI dynamiques : les indicateurs se recalculent selon la recherche
Recherche avec highlight : mettre en surbrillance les termes trouves dans les cartes

Attributs

Attribut	Type	Defaut	Description
`id`	String	-	Requis. Identifiant de la sortie (donnees filtrees).
`source`	String	`""`	Requis. ID de la source a ecouter.
`fields`	String	`""`	Champs a rechercher (virgule-separes). Vide = tous les champs.
`placeholder`	String	`"Rechercher..."`	Placeholder du champ de saisie.
`label`	String	`"Rechercher"`	Label du champ (accessible).
`debounce`	Number	`300`	Delai en ms avant declenchement du filtre.
`min-length`	Number	`0`	Nombre minimum de caracteres avant declenchement.
`highlight`	Boolean	`false`	Ajoute `_highlight` avec `<mark>` pour dsfr-data-display.
`operator`	String	`"contains"`	Mode : `contains`, `starts`, `words`.
`sr-label`	Boolean	`false`	Label en sr-only (masque visuellement, accessible).
`count`	Boolean	`false`	Affiche un compteur de resultats.
`url-search-param`	String	`""`	Nom du parametre URL a lire comme terme de recherche initial (vide = desactive).
`url-sync`	Boolean	`false`	Synchronise l'URL quand l'utilisateur tape (replaceState).
`server-search`	Boolean	`false`	Deleguer la recherche au serveur via l'adapter de la source amont. Envoie une commande WHERE a `dsfr-data-source` au lieu de filtrer localement.
`search-template`	String	`""`	Template de la clause WHERE server-side. `{q}` est remplace par le terme saisi. Ex : `"Nom:contains:{q}"`. Si vide et `server-search` actif, lu depuis l'adapter.

Modes de recherche :
contains (defaut) : sous-chaine insensible a la casse et aux accents.
starts : chaque mot du champ doit commencer par le terme.
words : tous les mots saisis doivent etre presents (dans n'importe quel champ, n'importe quel ordre). Le plus utile pour la recherche multi-criteres.

Exemple 1 : recherche simple + tableau

Recherche textuelle sur les champs Produit, Marque et Categorie. Le tableau se filtre en temps reel avec un compteur de resultats.

Code

<dsfr-data-search id="searched" source="clean"
  fields="Produit, Marque, Categorie"
  placeholder="Produit, marque ou categorie..."
  operator="words"
  min-length="2"
  count>
</dsfr-data-search>

<dsfr-data-list source="searched"
  colonnes="Produit, Categorie, Marque, Date"
  tri="Date:desc"
  pagination="10">
</dsfr-data-list>

Exemple 2 : recherche + facettes + cartes

La recherche et les facettes se combinent. La recherche reduit le jeu de donnees, les facettes affinent. Les cartes affichent les resultats.

Code

<dsfr-data-search id="searched" source="clean"
  fields="Produit, Marque, Categorie"
  placeholder="Rechercher un produit rappele..."
  operator="words"
  count>
</dsfr-data-search>

<dsfr-data-facets id="filtered" source="searched"
  fields="Categorie, Marque"
  labels="Categorie:Categorie | Marque:Marque"
  max-values="6">
</dsfr-data-facets>

<dsfr-data-display source="filtered" cols="3" pagination="9">
  <template>
    <div class="fr-card">
      <div class="fr-card__body">
        <div class="fr-card__content">
          <h3 class="fr-card__title">{{Produit}}</h3>
          <p class="fr-card__desc">{{Marque}}</p>
        </div>
        <div class="fr-card__footer">
          <p class="fr-badge fr-badge--sm">{{Categorie}}</p>
        </div>
      </div>
    </div>
  </template>
</dsfr-data-display>

Exemple 3 : recherche + KPI + graphique

Les KPI et le graphique se recalculent en temps reel selon la recherche. Rechercher par nom d'entreprise, departement ou region.

Code

<dsfr-data-search id="searched" source="clean"
  fields="Entreprise, Region, Departement"
  placeholder="Entreprise, region, departement..."
  operator="words"
  count>
</dsfr-data-search>

<dsfr-data-kpi source="searched" valeur="count" label="Projets" couleur="bleu"></dsfr-data-kpi>
<dsfr-data-kpi source="searched" valeur="sum:montant_investissement" label="Investissement" format="euro"></dsfr-data-kpi>

<dsfr-data-query id="stats" source="searched"
  group-by="Region"
  aggregate="nombre_beneficiaires:sum:Beneficiaires"
  order-by="Beneficiaires:desc"
  limit="10">
</dsfr-data-query>

<dsfr-data-chart source="stats" type="bar"
  label-field="Region"
  value-field="Beneficiaires"
  selected-palette="categorical">
</dsfr-data-chart>