How to Use Retool's Autocomplete Feature

Drag a Select component from the component panel onto the canvas. In the Inspector's General section, find the Filterable toggle and enable it. When Filterable is on, a search box appears at the top of the Select dropdown when it opens. As the user types in the search box, options are filtered client-side using a case-insensitive substring match against option labels. This is the quickest path to autocomplete for static or pre-loaded option lists.

Create a Resource Query named getCustomers with 'Run on page load' enabled. Set the Select component's Data Source to Custom in the Inspector, and set Options to {{ getCustomers.data }}. Set Option Label to {{ item.full_name }} and Option Value to {{ item.id }}. The Select now shows customer names as labels and passes customer IDs as values. When the user types in the search box, Retool filters by label (full_name) client-side.

1-- SQL query: getCustomers (Run on page load: ON)
2SELECT id, full_name, email
3FROM customers
4ORDER BY full_name ASC
5LIMIT 500;
6
7// Select component Inspector settings:
8// Options: {{ getCustomers.data }}
9// Option Label: {{ item.full_name }}
10// Option Value: {{ item.id }}

For large datasets, replace the Filterable Select approach with a dedicated Text Input for search input. Add a Text Input named customerSearchInput with Placeholder 'Type to search customers…'. Create a Resource Query named searchCustomers that uses the input value in a SQL ILIKE clause. Enable 'Run on page load' on searchCustomers so it loads an initial result set. Set a Select component's options to {{ searchCustomers.data }}.

1-- SQL query: searchCustomers
2-- Run on page load: ON
3-- Event: customerSearchInput onChange triggers this query
4SELECT id, full_name, email
5FROM customers
6WHERE full_name ILIKE {{ '%' + customerSearchInput.value + '%' }}
7   OR email ILIKE {{ '%' + customerSearchInput.value + '%' }}
8ORDER BY full_name ASC
9LIMIT 20;

Without debouncing, every keypress triggers a database query, which wastes resources and causes flickering. In customerSearchInput's Inspector → Interaction → Event Handlers, add a Change event that triggers searchCustomers. In the event handler's Advanced Options, enable 'Debounce' and set the debounce time to 300 milliseconds. This delays the query trigger until the user pauses typing for 300ms, reducing queries from one per character to roughly one per word.

Drag a Multiselect component onto the canvas for cases where users need to select multiple values (tags, categories, assignees). Enable Filterable in the Inspector. Set its Options, Option Label, and Option Value the same way as the Select. The selected values are accessible as {{ multiselect1.value }} which returns an array. Use {{ multiselect1.value.join(', ') }} to display selections as a comma-separated string, or pass the array directly to a SQL query using {{ multiselect1.value }}.

1// SQL query using multiselect values (PostgreSQL ANY):
2SELECT * FROM orders
3WHERE customer_id = ANY({{ multiselect1.value }});
4
5// Or with IN clause (cast to text):
6SELECT * FROM tags
7WHERE name IN ({{ multiselect1.value.map(v => `'${v}'`).join(',') }});

After the user selects an option, you often need to display the human-readable label (e.g., customer name) somewhere other than the select itself. The Select's .value property holds the option value (e.g., customer ID). To display the label, look it up in the options array: {{ getCustomers.data.find(c => c.id === customerSelect.value)?.full_name || '' }}. Alternatively, access .selectedOption which is available on Select components in newer Retool versions.

1// Display the selected customer's full name:
2{{ getCustomers.data.find(c => c.id === customerSelect.value)?.full_name || 'No customer selected' }}
3
4// Display selected customer's email:
5{{ getCustomers.data.find(c => c.id === customerSelect.value)?.email || '' }}
6
7// With selectedOption (Retool v3.x+):
8{{ customerSelect.selectedOption?.label || '' }}