Build a custom autocomplete dropdown in Bubble that shows filtered suggestions as users type. This tutorial covers creating a Repeating Group positioned below an input field, filtering results in real time with server-side constraints, handling suggestion selection, and optimizing search performance for large datasets.
Overview: Adding Autocomplete Suggestions in Bubble
Autocomplete improves UX by predicting what users want. This tutorial builds a custom autocomplete from scratch using an input, a dynamically visible Repeating Group, and real-time filtering.
Prerequisites
- A Bubble app with searchable records
- Basic understanding of Repeating Groups and custom states
- Familiarity with conditional visibility
Step-by-step guide
Create the input and dropdown
Create the input and dropdown
Add a Text Input for search. Below it, add a Repeating Group (5-8 items, fixed height 200px, scroll). Set the RG invisible by default. Both should be inside a parent Group for positioning.
Expected result: An input with a hidden dropdown Repeating Group below it.
Configure real-time filtering
Configure real-time filtering
Set the RG data source to Do a search for your Data Type where name contains Input's value with Ignore empty constraints. Add a conditional: visible when Input's value character count > 1. This shows suggestions only after 2+ characters.
Pro tip: Limit to 5-8 items for a compact, fast dropdown.
Expected result: Dropdown appears with matching suggestions as user types.
Handle suggestion selection
Handle suggestion selection
Make each RG cell clickable. On click, set a custom state to the selected item's value, populate the Input, and hide the RG. If the autocomplete feeds into a search, trigger that action after selection.
Expected result: Clicking a suggestion fills the input and closes the dropdown.
Hide dropdown on blur
Hide dropdown on blur
Use a Do when condition is true workflow to hide the RG when the input loses focus. Alternatively, use a Group Focus element for the dropdown which auto-hides when clicking outside.
Expected result: The dropdown closes when clicking outside the input area.
Optimize for large datasets
Optimize for large datasets
Create a concatenated search_text field for multi-field search. Use server-side constraints only. For 10,000+ records, consider the OmniSearch plugin with Algolia for sub-100ms results.
Expected result: Fast autocomplete even with thousands of records.
Complete working example
1AUTOCOMPLETE — WORKFLOW SUMMARY2================================34PAGE ELEMENTS5 Input: Search field6 RG: Dropdown (hidden, 5-8 items, 200px height)7 Source: Search where name contains Input value8 Visible when: Input length > 1910WORKFLOW: Select Suggestion11 Trigger: RG cell clicked12 Step 1: Set Input value to selected item name13 Step 2: Hide RG14 Step 3: Trigger search/action if needed1516WORKFLOW: Clear17 When Input is empty → Hide RG1819PERFORMANCE20 - 5-8 items max21 - Server-side constraints only22 - Show after 2+ charactersCommon mistakes when building autocomplete suggestions in Bubble
Why it's a problem: Showing suggestions from the first character
How to avoid: Show after 2-3 characters using a character count condition.
Why it's a problem: Using :filtered instead of search constraints
How to avoid: Put all filtering in Do a search for constraints.
Why it's a problem: Not closing the dropdown when clicking outside
How to avoid: Use a Group Focus element or blur detection to auto-close.
Best practices
- Show after 2+ characters to reduce queries
- Use server-side constraints, not :filtered
- Limit to 5-8 suggestions
- Hide dropdown on blur or outside click
- Debounce input changes for performance
- Create concatenated search_text for multi-field search
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
How do I build autocomplete suggestions in Bubble.io with a dropdown that filters in real time?
Create an autocomplete input with a Repeating Group dropdown that filters results as the user types, shows after 2+ characters, and populates the input on selection.
Frequently asked questions
Should I use Bubble's SearchBox instead?
SearchBox provides basic autocomplete but a custom RG gives full control over styling and behavior.
How do I search multiple fields?
Create a concatenated search_text field. Search against this single field.
Can I highlight matching text?
Not natively. Use a JavaScript plugin for substring highlighting.
How many suggestions should I show?
5-8 is optimal. Fewer feels limited; more is cluttered.
Can RapidDev help with advanced search?
Yes. RapidDev builds autocomplete with fuzzy matching, typo tolerance, and external search engines.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation