Autocomplete in forms
Add autocomplete or look-up functionality to your forms that references an Algolia search index.
Last updated
Add autocomplete or look-up functionality to your forms that references an Algolia search index.
Last updated
To use the autocomplete field type in an Action Links form, you first need to create an index in Algolia. An index is a table of data that is designed to be searched, and is where you will need to upload the data that you want your autocomplete field to query.
To create an index in Algolia:
Log in to your account and navigate to the Search product.
Create an Application, if you haven't already. You will need to provide the ID for this application (or 'app') when configuring your autocomplete field.
Create an Index within your Application.
Upload your data, e.g. from a CSV file.
If you're working with a regularly changing dataset, you may want to work with a developer to sync data from a third-party data source to your Algolia index.
To ensure your autocomplete field functions as expected, you should visit the Configuration tab for your index in Algolia and ensure that the fields included as Searchable attributes (i.e. the fields in your data that Algolia will query with a user's search term) are as required and ordered appropriately.
When adding an autocomplete field to a form, you will be asked to provide API credentials for your Algolia application, as well as the details of the index your field should reference.
| Field | Detail |
|---|---|
Show skip step button
If checked, a button will display below the autocomplete field to give the user a way to skip the current form step. This is useful if you want to give the user an alternative way of providing the information, or selecting an item from the autocomplete response is optional. When set to display, the label for the button can be customised.
Algolia App ID
The ID for the application that contains your index in Algolia, e.g. A1B2C3D4E5.
Algolia index name
The name you've set for your index, e.g. my_index.
Algolia result key
To help the front-end code distinguish between results for your autocomplete field, provide the path to a unique identifier within each object in your index, such as a name or ID. If the value is nested, use dot notation to access it, e.g. School Details.School Id (space are allowed).
Algolia result template – Line 1
A path to the datapoint you want to display on the first line of each result. As with the result key, you can use dot notation to access nested values.
Algolia result template – Line 2 (part 1)
A path to the datapoint you want to display at the start of the second line of each result. As with the result key, you can use dot notation to access nested values.
Algolia result template – Line 2 (part 2)
A path to the datapoint you want to display at the end of the second line of each result. As with the result key, you can use dot notation to access nested values.
Populate fields from selected result
The full dataset for the selected result in Algolia will be passed with the form's submission, but you can also populate other fields in your form by specifying the name of a field and the path in your dataset (using dot notation to access nested fields) to the relevant datapoint you want to populate that field with.