Skip to main content
All CollectionsAPI and Developer DocumentationAPI
Build a custom lookup, autocomplete, or search field
Build a custom lookup, autocomplete, or search field

Allow submitters to key a few strokes and show an auto-complete list of options by connecting to a third party endpoint.

Kunal Johar avatar
Written by Kunal Johar
Updated over a week ago

The single line text field in the Form Builder has the options 

  • Autocomplete from third party

  • Require selection from third party

  • Set Field values from third party

Autocomplete from third party
This selection shows a list of autocomplete options to the user.  To make this work you must provide an endpoint that accepts a query string query and returns a JSON array as follows. 

(CORS header is required)

GET https://www.example.com/your-endpoint?query={value user typed in}

RESPONSE:
[{
"label": "Test User 1",
"value": "1"
}, {
"label": "Test User 2",
"value": "2"
}, {
"label": "Test User 3",
"value": "3"
}]

The label is what will be inputted into the the text field on selection.

The response expected is a JSON array of {label, value}

Require selection from third party
If set it means that the user must choose a value from the auto-complete list.

Set field values from third party
If set, the application form will make an additional query to another endpoint to fill additional fields.  This time the value query string will be set.

(CORS header is required)

This example result adds a table row to a table with the alias tableAlias and then sets 2 additional fields not belonging to the table, company and website.

GET https://www.example.com/your-value-endpoint?value={value received from autocomplete}

RESULT
[{
"tableAlias": "tableAlias",
"fields": [{
"alias": "authorEmail",
"value": "test@test.com"
}, {
"alias": "authorName",
"value": "Test User"
}]
},
{
"tableAlias": "null",
"fields": [{
"alias": "company",
"value": "Test Company"
}, {
"alias": "website",
"value": "http://www.example.com"
}]
}]

The response expected is a JSON array of {tableAlias, field:[{alias, value}]} where tableAlias can be null.

This can also be done by connecting to a Google Sheet or CSV file when you are using the Integrations Hub feature.

Did this answer your question?