# Recherche

> Découvrez comment utiliser le composant Recherche dans PandaSuite pour effectuer des recherches avancées dans vos applications, configurer les paramètres de recherche et afficher les résultats de manière efficace.

https://docs.pandasuite.com/fr/essentials/components/search/

**Le composant Recherche permet d'effectuer une recherche dans une source de données ou dans l'intégralité des textes de votre application. Grâce au composant Collection/Liste, faites apparaître la liste des résultats dans la mise en forme de votre choix.**

[Image : Application immobilière Pandimmo sur téléphone : un champ de recherche vide au-dessus d'annonces avec photo, adresse et prix]

## Insérer un champ de recherche

D'abord, insérez le composant **Recherche** depuis la liste des Composants. Sachez que ce composant n'est pas visuel : il est accessible depuis les Objets, en bas à gauche de votre écran. Insérez un composant [Saisie de texte](https://docs.pandasuite.com/fr/essentials/components/text-input/) pour créer le champ de recherche et placez-le à l'endroit de votre choix.

Dans les propriétés de ce composant, vous avez le choix d'activer la **Validation en direct**ou non :

- Si vous activez cette propriété, la recherche se lancera automatiquement pendant que l'utilisateur tape le terme de recherche.
- Si vous ne l'activez pas, il est nécessaire d'ajouter un bouton pour [valider la saisie](https://docs.pandasuite.com/fr/essentials/components/text-input/#valider-la-saisie).

Pour lancer l'action de recherche :

- Sélectionnez ce composant **Saisie de texte** et ajoutez une action pour lancer la recherche. Choisissez le déclencheur **Validé** et ajoutez une action sur le composant **Recherche** :\
  *Agir sur un composant* > *Recherche* > *Rechercher*

[Image : Action du champ de recherche : À la validation lance Rechercher sur le composant Recherche, avec le terme lié à la Valeur de saisie de l'événement]

- Dans le champ **Terme de recherche**, sélectionnez l'objet de la recherche, c'est-à-dire la valeur du champ.
- Ajoutez une liaison de données et choisissez **Depuis l'événement sélectionné** > **Valeur de saisie**, ou **Depuis un composant** > **Saisie de texte** > **Valeur de saisie**.

## Configurer les paramètres de recherche

Il est maintenant nécessaire de configurer la recherche : la source de données, les champs et les paramètres de la recherche. Prenons l'exemple présenté dans ce tutoriel : un catalogue de biens immobiliers dont les données sont gérées dynamiquement dans l'application. Lorsque l'utilisateur saisit "piscine":

- Dans quels champs de votre base de données souhaitez-vous rechercher cette information : *Nom*, *Adresse*, *Description*...?
- Si l'utilisateur tape "pisine" au lieu de "piscine", souhaitez-vous que les résultats apparaissent ?

Dans PandaSuite, vous avez de nombreuses options pour configurer la correspondance de résultat.

### Identifier la source

Rendez-vous dans la fenêtre **Propriétés** du composant **Recherche**. Cliquez sur **Source** et choisissez votre source de données : un composant, une base de données, le projet etc.:

[Image : Fenêtre Donnée de la Source du composant Recherche : le chemin Airtable18042 > records, un tableau de 22 lieux, est encadré]

- Si votre recherche se fait dans une source de données, choisissez **Depuis une base de données** et sélectionnez cette source dans la liste.
- Si votre recherche concerne les textes de l'application, sélectionnez **Depuis le projet** et le champ **Tous les textes**.

[Image : Fenêtre de données de la Source du composant Recherche : From project propose le champ All texts, une collection de 33 éléments, encadré]

Pour en savoir plus, consultez l'article dédié : [Rechercher dans tous les textes](https://docs.pandasuite.com/fr/essentials/data/full-text-search/)

### Définir les champs de la recherche

Maintenant que vous avez défini la source, affinez les champs de votre recherche. Double-cliquez sur le composant **Recherche** pour visualiser les données brutes de votre requête. Dans l'onglet **CONFIGURATION**, sélectionnez les champs sur lesquels doivent s'effectuer la recherche en cliquant dessus : une fois sélectionnés, ils apparaissent en haut de votre écran.

[Vidéo : dans l'onglet CONFIGURATION du composant Recherche, un clic sur Category puis Description ajoute ces champs en haut]

Dans l'onglet **TESTS**, vous avez la possibilité de tester les résultats de votre requête.

### Personnaliser la sensibilité de la recherche

Au sein des paramètres du composant Recherche, il vous est possible d'affiner la réactivité du moteur de recherche face aux fautes d'orthographe. Cette personnalisation s'effectue à travers divers réglages disponibles dans les Propriétés du composant.

#### Processus de tokenisation

La tokénisation, étape cruciale dans le fonctionnement d'un moteur de recherche, consiste à segmenter le texte en "tokens" ou unités de base. Ce processus se déroule tant lors de la phase d'interrogation que d'indexation, permettant ainsi d'établir des correspondances précises entre les requêtes soumises et les données enregistrées.

Voici les différentes options disponibles :

- **Recherche de mots entiers** : cette option permet d'indexer les mots dans leur intégralité, tel qu'ils apparaissent dans le texte.
- **Recherche partielle (vers l'avant)** : elle indexe les mots progressivement, en commençant par le début.
- **Recherche partielle (vers l'arrière)** : à l'inverse, cette option indexe les mots en partant de la fin.
- **Rechercher toutes les combinaisons possibles** : cette méthode d'indexation prend en compte toutes les séquences de caractères possibles au sein des mots.

#### Paramétrage des correspondances

Il est également possible de configurer le moteur pour reconnaître des correspondances basées sur la phonétique. Voici les différentes options disponibles :

- **Non sensible à la casse (1)** : le moteur de recherche ne fait pas de distinction entre les majuscules et les minuscules.
- **Normalisation phonétique (2)** : les mots sont indexés et recherchés selon leur prononciation plutôt que leur orthographe exacte.
- **Normalisation phonétique et transformations littérales (3)** : outre la prise en compte de la prononciation, certaines transformations orthographiques sont également appliquées pour élargir les résultats de recherche.
- **Normalisation phonétique et transformations soundex (4)** : cette option utilise le système Soundex pour indexer les mots selon leur sonorité, permettant de retrouver des termes aux sonorités similaires même en cas de variantes orthographiques.

Ces ajustements offrent une grande flexibilité dans la configuration de la recherche, permettant ainsi d'optimiser les résultats en fonction des besoins spécifiques de votre projet. Voici un tableau qui vous permet de voir si la requête "Björn-Philipp Mayer" s'affiche en fonction des différentes options et d'une requête erronée :

| Requête    | **(1)** | **(2)** | **(3)** | **(4)** |
| ---------- | ------- | ------- | ------- | ------- |
| björn      | Oui     | Oui     | Oui     | Oui     |
| bjorn      | Non     | Oui     | Oui     | Oui     |
| philipp    | Non     | Non     | Oui     | Oui     |
| byorn mair | Non     | Non     | Oui     | Oui     |

#### Limiter les résultats

Choisissez le nombre maximal de résultats à s'afficher dans la recherche.

## Affichage des résultats de la recherche

Lorsque vous souhaitez présenter les résultats d'une recherche, vous disposez de deux approches distinctes :

- Afficher exclusivement les résultats de la recherche
- Filtrer une liste complète d'éléments en utilisant les critères de recherche

### Option 1 : Affichage des résultats de la recherche uniquement

Opter pour cette méthode simplifie la mise en place. Pour afficher seulement les résultats recherchés, créez une collection dédiée qui tire ses informations directement du composant Recherche.

- Ajoutez un composant **Collection/Liste**.
- Dans les paramètres de ce composant, pour le champ **Source**, choisissez **Depuis un composant**, et sélectionnez le composant **Recherche** comme source de données.

[Image : Fenêtre Donnée de la Source d'une Collection / Liste : le chemin Search31770 > Search results est encadré, au-dessus des 22 résultats]

Pour intégrer les données de chaque résultat individuellement :

- Déterminez la **Source** pour chaque élément en établissant un lien de données (data binding).
- Utilisez la fonction By Id pour associer chaque résultat avec son identifiant unique (ID) au sein de la collection.

[Image : Fenêtre Donnée du titre d'un résultat : Search31770 > Search results > By Id > fields > Name, valeur Rosa Bonheur, encadré]

### Option 2 : Filtrage d'une liste complète avec la recherche

Cette méthode consiste à appliquer un filtre à votre liste globale d'éléments, en se basant sur les critères de recherche.

- Introduisez un composant **Collection/Liste**.
- Pour le champ **Source**, sélectionnez **Depuis un composant** et indiquez la source de données souhaitée.

Lors de la configuration de chaque élément de la liste :

- Choisissez **Source** et spécifiez les paramètres de liaison de données.
- Avec la fonction **By Id**, liez l'identifiant de chaque élément avec l'ID correspondant au sein de la liste.

[Image : Fenêtre Donnée d'un titre de carte de la liste complète : Transform > Transformed Results > By Id > Name, encadré]

- Ajoutez un **Filtre** au composant Collection/Liste. Ce filtre permettra de ne montrer que les éléments qui correspondent aux termes de la recherche effectuée.

[Image : Condition de filtre In Search? de la Collection / Liste : l'élément s'affiche si Search results By Id est connu, OU si Search results est inconnu]

En personnalisant ainsi la présentation des résultats, vous offrez une expérience utilisateur fluide et intuitive, permettant aux utilisateurs de trouver facilement ce qu'ils recherchent.