Skip to main content

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.

Prerequisites

There are some prerequisites before you start defining the search query:

  1. A properly configured Algolia account.
  2. Have at least one Firestore Collection connected to the Algolia account.
  3. Completed Algolia configuration on FlutterFlow.
Complete setup

If you haven't completed these steps, please follow the instructions present on the following page before proceeding: Algolia Search

Building Search UI​

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 and drop it onto the canvas. (In the demo below, the TextField is placed inside the AppBar of the app).
  2. You can customize the TextField properties to match your app's design style. Add a search Icon 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 two Text widgets are added inside a Column).

Define Algolia Search Backend Query​

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. Select Backend Query from the Properties Panel (the right menu).
  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.

Display Search Results​

Follow the step below to display the search results inside the ListView:

  1. Select a widget present inside the ListView, for example, a Text widget.
  2. Click Set from Variable from the Properties Panel (right menu).
  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.