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:

And you want the Dropdown to only show book titles 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 }}.

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.