The Search component

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.

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 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. 

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

• 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 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...: 

• 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 the project and the field All Texts :

For more information, consult the dedicated article: 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. 

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:

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.

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.

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.

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

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.