Comment on page
Algolia Search Query
You can set up an Algolia Search backend query to automatically trigger a search once the user navigates to the page. This will help users to find any document present inside a Firestore Collection by providing a search term.
If you haven't completed these steps, please follow the instructions present on the following page before proceeding:
You will need a text to be used as the search term while using the Algolia search backend query. Let's build a search UI to take the term as user input and display the results returned from the query in a list. You can use a
TextField
to take the search term as input and a ListView
to display the results.Follow the steps below to create this UI:
- 1.Drag a
TextField
widget from the Widget Panel and drop it onto the canvas. (In the demo below, theTextField
is placed inside theAppBar
of the app). - 2.You can customize the
TextField
properties to match your app's design style. Add a searchIcon
to signify that it's a search field. - 3.Check the Update Page On Change checkbox. This helps to update the page as the user types inside the
TextField
. This would be required to use the latest text field value as the search term. - 4.Set an Update Delay (in milliseconds). This specifies the amount of time after the user stops typing to update the page.
- 5.Now, drag and drop a
ListView
widget onto the canvas. - 6.Similarly, you can add widgets inside the
ListView
that you need for displaying the search result. (In the following demo, you will find that twoText
widgets are added inside aColumn
).

Once the UI of the page is ready, you can move on to the next step, that is, defining an Algolia Search Backend Query.
Follow the steps below to define the Backend Query:
- 1.Select the widget (or page) on which to apply the query. In this case, it's recommended to apply the query on the
ListView
widget. - 2.
- 3.Select the Query Type as Algolia Search.
- 4.Choose the Firebase Collection on which to perform the search.
- 5.Define from where to get the Search Term. You can either choose Specific Value or From Variable. If you want to use a
TextField
value as the search term, you should choose From Variable. - 6.If you have chosen Specific Value, define the term inside the field present.
- 7.If you have chosen From Variable, select a Source from the dropdown menu and then select an option from the Available Options. For example, if you want to use the value of a
TextField
, select the Source as Widget State and choose the field name under Available Options. - 8.Set the number of maximum search results to fetch under Max Results. Keep this field blank if you want to fetch all the matching search results.

Follow the step below to display the search results inside the
ListView
:- 1.Select a widget present inside the
ListView
, for example, aText
widget. - 2.
- 3.From the Source dropdown menu, choose the response of the Algolia Search that you had defined on the ListView widget.
- 4.Under Available Options select the name of the field whose value you want to use.
- 5.(Optional) You can specify a Default Value that would be shown if the field value is empty.
- 6.Click Save.
- 7.Repeat Steps 1 to 6 for using the search response data on any other widget.

If you want to pass the Algolia Search results to another page of your app, follow the instructions present here.
Last modified 3mo ago