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 causesquery1
to run again, which causes the Dropdown's autocomplete options to update.
Updated 9 months ago