Input and selection types

This guide shows you how to update the autocomplete values of a Dropdown based on what the user has typed. It assumes you've built a Retool app before. If not, check out the Overview.

Example

Suppose that you have a Dropdown that shows many book titles:

A Dropdown with many options

And you want the Dropdown to only show book titles that match the user's input:

The Dropdown has filtered its options to only show the ones that match the user's input

1. Add a Dropdown to your Canvas

Drag a Dropdown component onto your Canvas. See Add a button to App A for an example of how to do this. The rest of this guide assumes that the Dropdown you add to your app is accessible via the JavaScript variable {{ select1 }}.

2. Use a query to populate the Dropdown's autocomplete options

Set the Values field of your Dropdown to the result of a query. In the example app above, the Values field of the Dropdown is set to {{ query1.data.name }}.

The Values field of the Dropdown

3. Feed the user's input into the query

{{ select1.searchValue }} gives you access to the input that the user has typed into the Dropdown. To update the Dropdown's autocomplete values based on user input, pass {{ select1.searchValue }} into the query that powers the autocomplete values. For example, the last section mentioned that the Values field of the example Dropdown is set to {{ query1.data.name }}. Below is the SQL that powers query1.

SELECT
  name
FROM
  products
WHERE
  name ILIKE {{ '%' + select1.searchValue + '%' }}

Tying it all together:

  • The Dropdown's autocomplete options are specified in its Values field. The options are determined by the result of query1.
  • When the user types into the Dropdown, the select1.searchValue property changes, which causes query1 to run again, which causes the Dropdown's autocomplete options to update.

Updated 12 months ago


Input and selection types


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.