Simple Search
The simple search allows you to search the data present locally on a device. For example, you could search from the list of strings (stored in a variable) and from the Firestore collection and documents already retrieved on the user's device (displayed on the screen).
We advise using a simple search only for the smaller Firestore collection (with limited records). Otherwise, it can be slow and/or expensive. For a more extensive collection, consider using the Algolia search.
Adding Simple Search
The steps to add a simple search are as follows:
1. Add page state variable
Create a page state variable named 'isShowFullList' with datatype Boolean and set its default value to True. We'll use this to decide whether to show the searched result or all items.
2. Building search bar
You can use the ready-made template, modify it, or build it from scratch that looks like this:
3. Adding search action
First, add the simple search action on the search button using the instructions here.
In the same action flow, add the update page state action and set the isShowFullList to False. This is necessary as now we'll be displaying the search results rather than the entire list of items.
Pro-tip for adding simple search action on Firestore Documents: The action for adding a simple search must be inside the widget you are doing the query on (query on Firestore collection). For example, while adding the search action on a Button widget, make sure you query the Firestore collection on any of its parent widgets, such as Page or Column.
4. Display search result
The simple search action (added in the previous step) gives us the search result. Now, we'll show the results in a new ListView. The idea here is to use two separate ListViews; one for showing all items and another for search results. Then, use the Conditional Builder widget to decide which one to display based on the IsShowFullList variable.
To do so, add the Conditional Builder widget, and set the First Condition to the IsShowFullList variable. Then, we'll make a copy of the existing ListView and put it under the Else section.
On the newly copied ListView, remove the existing backend query and generate children from variable by setting the source to Simple Search Results.
5. Clearing search result
Allowing users to clear the search result helps them quickly get back to the original list and try the new search term. On the cancel button inside the search bar, add an action to update the page state variable named IsShowFullList to True and clear the TextField value.
Last Updated Date: October 24, 2023
Last updated
