# Search

> Discover the capabilities of the Search component for searching within data sources or across text applications. Learn how to insert search fields, configure settings, customize search sensitivity, and display results effectively for an optimized search experience.

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

**The Search component allows for searching within a data source or across all texts in your application. Thanks to the Collection / List component, you can display the list of results in any format you prefer.**

[Image: Pandimmo real estate app on a phone: an empty search field above property listings with photo, address and price]

## Inserting a search field

First, insert the **Search** component from the Components list. Note that this component is not visual: it is accessible from Objects, at the bottom left of your screen.

Insert a [Text Input](https://docs.pandasuite.com/essentials/components/text-input/) component to create the search field and place it wherever you prefer.

In the properties of this component, you can choose to enable **Live Validation** or not:

- If you enable this property, the search will automatically initiate as the user types the search term
- If you do not enable it, you will need to add a button to [validate the input](https://docs.pandasuite.com/essentials/components/text-input/#validate-the-entry).

To initiate the search action:

- Select this **Text Input** component and add an action to start the search. Choose the **On Validated** trigger and add an action on the **Search** component: **Interact with a component** > **Search** > **Search**

[Image: Action of the search field: On Validated runs Search on the Search component, with the Search term bound to the event Input value, framed]

- In the **Search Term** field, select the object of the search, i.e., the value of the field.
- Add a data binding and choose **From the selected event** > **Input value**, or **From a component** > **Text Input** > **Input value**.

## Configuring search settings

It is now necessary to configure the search: the data source, fields, and search settings.

Taking the example presented in this tutorial: a real estate catalog whose data is dynamically managed within the application. When the user enters "pool":

- In which fields of your database do you wish to search for this information: *Name*, *Address*, *Description*...?
- If the user types "pisine" instead of "pool", do you want the results to appear?

In PandaSuite, you have numerous options for configuring result matching.

### Identifying the source

Go to the **Properties** window of the **Search** component.

Click on **Source** and choose your data source: a component, a database, the project, etc...:

[Image: Data window of the Search component Source: the path Airtable18042 > records, an array of 22 places, is framed]

- If your search is within a data source, choose **From a database** and select this source from the list
- If your search involves the application's texts, select **From project** and the field **All Texts**:

[Image: Data window for the Search component Source: From project lists the All texts field, a collection of 33 items, framed]

For more information, consult the dedicated article: [Full text search](https://docs.pandasuite.com/essentials/data/full-text-search/)

### Defining the search fields

Now that you have defined the source, refine the fields of your search.

Double-click on the **Search** component to view the raw data of your request.

In the **CONFIGURATION** tab, select the fields on which the search should be conducted by clicking on them: once selected, they will appear at the top of your screen.

[Video: in the Search component's CONFIGURATION tab, clicks on the Category then Description values add these fields at the top]

In the **TESTS** tab, you have the opportunity to test the results of your query.

### Customizing search sensitivity

Within the settings of the Search component, you can refine the search engine's sensitivity to spelling mistakes. This customization is done through various settings available in the component's Properties.

#### Tokenization process

Tokenization, a crucial step in the operation of a search engine, involves segmenting the text into "tokens" or basic units. This process occurs during both the querying and indexing phases, thus establishing precise correspondences between the submitted queries and the recorded data.

Here are the different options available:

- **Whole word search**: this option indexes the words in their entirety, as they appear in the text.
- **Partial search (forward)**: it indexes the words progressively, starting from the beginning.
- **Partial search (backward)**: on the contrary, this option indexes the words starting from the end.
- **Search all possible combinations**: this indexing method takes into account all possible character sequences within the words.

#### Setting up matches

It is also possible to configure the engine to recognize matches based on phonetics.

Here are the different options available:

- **Case insensitive (1):** the search engine does not distinguish between uppercase and lowercase.
- **Phonetic normalization (2):** words are indexed and searched based on their pronunciation rather than their exact spelling.
- **Phonetic normalization and literal transformations (3):** in addition to considering pronunciation, some orthographic transformations are also applied to broaden the search results.
- **Phonetic normalization and Soundex transformations (4):** this option uses the Soundex system to index words based on their sound, allowing for the retrieval of terms with similar sonorities even in case of orthographic variants.

These adjustments provide great flexibility in configuring the search, thus optimizing the results according to the specific needs of your project.

Here is a table that allows you to see if the query "*Björn-Philipp Mayer*" is displayed according to the different options and a mistaken query:

| Query      | **(1)** | **(2)** | **(3)** | **(4)** |
| ---------- | ------- | ------- | ------- | ------- |
| björn      | Yes     | Yes     | Yes     | Yes     |
| bjorn      | No      | Yes     | Yes     | Yes     |
| philipp    | No      | No      | Yes     | Yes     |
| byorn mair | No      | No      | Yes     | Yes     |

#### Limiting results

Choose the maximum number of results to display in the search.

## Displaying search results

When you wish to present the results of a search, you have two distinct approaches:

- Display only the search results
- Filter a complete list of items using the search criteria

### Option 1: Displaying only search results

Choosing this method simplifies setup. To display only the searched results, create a dedicated collection that draws its information directly from the Search component.

- Add a **Collection/List** component.
- In the settings of this component, for the **Source** field, choose **From a component**, and select the **Search** component as the data source.

[Image: Data window of a Collection List Source: the path Search31770 > Search results is framed, above the 22 results]

To integrate the data from each result individually:

- Determine the **Source** for each element by establishing a data binding.
- Use the By Id function to associate each result with its unique identifier (ID) within the collection.

[Image: Data window of a result title: Search31770 > Search results > By Id > fields > Name, whose value is Rosa Bonheur, framed]

### Option 2: Filtering a complete list with the search

This method involves applying a filter to your entire list of items, based on the search criteria.

- Introduce a **Collection/List** component.
- For the **Source** field, select **From a component** and indicate the desired data source.

When configuring each list item:

- Choose **Source** and specify the data binding settings.
- With the **By Id,** function, link the identifier of each item with the corresponding ID within the list.

[Image: Data window of a card title in the full list: Transform > Transformed Results > By Id > Name, framed next to the Name binding]

- Add a **Filter** to the Collection/List component. This filter will only show items that match the search terms entered.

[Image: In Search? filter condition of the Collection List: the item shows if Search results By Id is known, OR if Search results is unknown]

By customizing the presentation of the results in this way, you provide a smooth and intuitive user experience, enabling users to easily find what they are looking for.