Bubble's Search Box element provides built-in autocomplete by searching your database as the user types and showing matching results in a dropdown. This tutorial covers configuring the Search Box for type-ahead suggestions, using Google Places for geographic autocomplete, and customizing the dropdown appearance.
Overview: Creating an Autocomplete Input in Bubble
Autocomplete inputs save users time by suggesting matches as they type. Bubble's Search Box element is purpose-built for this — it searches your database in real time and displays matching results in a dropdown. This tutorial covers both database-backed autocomplete and Google Places geographic autocomplete for address fields.
Prerequisites
- A Bubble app with a Data Type containing records to search
- Basic familiarity with Bubble elements and the Property Editor
- Google Maps API key (only if using geographic autocomplete)
Step-by-step guide
Add a Search Box element to your page
Add a Search Box element to your page
In the Design tab, click the + icon and search for Search Box. Drag it onto your page. The Search Box is a specialized input that combines a text input with a dropdown of search results. In the Property Editor, set the Choices style to your preferred display (typically Searchbox with dropdown) and set the Placeholder text to something helpful like Start typing to search.
Expected result: A Search Box element appears on your page with a text input area.
Configure the data source and search field
Configure the data source and search field
In the Search Box's Property Editor, set the Type of choices to your Data Type (e.g., Product, Contact, City). Set the Field to search to the text field you want to match against (e.g., name, title). The Search Box automatically searches this field as the user types and shows matching results in the dropdown. Set the Search results display to the field you want to show in the dropdown (usually the same field or a more descriptive one).
Pro tip: The Search Box matches from the beginning of the field value by default. For contains-style matching, consider using a custom search input with a Repeating Group instead.
Expected result: The dropdown shows matching results from your database as the user types.
Set up geographic autocomplete with Google Places
Set up geographic autocomplete with Google Places
For address autocomplete, set the Search Box's Type of choices to Geographic Places. This uses the Google Maps API to suggest addresses as the user types. You need a Google Maps API key configured in your Bubble app — go to Settings → General and paste your key in the Google Maps API Key field. Make sure the Places API is enabled in your Google Cloud Console.
Expected result: The Search Box suggests real addresses from Google Places as the user types.
Handle the selected value in your workflows
Handle the selected value in your workflows
When a user selects a suggestion from the dropdown, the Search Box's value changes to the selected item. In your workflows, reference Search Box A's value to get the selected record. For database-backed autocomplete, this returns the full Data Type record — you can access any field on it. For geographic autocomplete, this returns an address object with formatted address, latitude, and longitude. Use these values to save to the database or navigate to a filtered view.
Expected result: You can access the selected autocomplete result in your workflows and use its data.
Customize the dropdown appearance
Customize the dropdown appearance
Style the Search Box's dropdown to match your app's design. In the Property Editor, adjust the font, colors, and padding. You can also limit the number of suggestions shown by setting the Maximum number of results (e.g., 5 or 10). For database-backed autocomplete, you can add additional constraints to the search to narrow results — for example, only show active products or contacts in a specific category.
Expected result: The autocomplete dropdown matches your app's visual style and shows a relevant number of suggestions.
Complete working example
1AUTOCOMPLETE SETUP SUMMARY2===========================34DATABASE AUTOCOMPLETE:5 Element: Search Box A6 - Type of choices: Product (your Data Type)7 - Field to search: name8 - Search results display: name9 - Placeholder: "Start typing a product name..."10 - Maximum results: 511 - Additional constraints: active = yes (optional)1213 Usage in workflow:14 SearchBox A's value → returns selected Product record15 SearchBox A's value's name → selected product name16 SearchBox A's value's price → selected product price1718GEOGRAPHIC AUTOCOMPLETE:19 Element: Search Box B20 - Type of choices: Geographic Places21 - Placeholder: "Enter an address..."22 23 Prerequisites:24 - Settings → General → Google Maps API Key25 - Google Cloud Console → Enable Places API2627 Usage in workflow:28 SearchBox B's value → returns geographic address29 SearchBox B's value's formatted address → "123 Main St, City, State"30 SearchBox B's geographic address → lat/lng coordinates3132SAVING SELECTED VALUE:33 Button: ConfirmButton34 Workflow: When ConfirmButton is clicked35 Action: Create a new Order36 → product = SearchBox A's value37 → delivery_address = SearchBox B's valueCommon mistakes when creating an auto-complete field in Bubble.io: Step-by-Step Guide
Why it's a problem: Expecting the Search Box to match text in the middle of field values
How to avoid: For contains-style matching, use a regular Input connected to a Repeating Group with a Do a Search For constraint instead of the Search Box
Why it's a problem: Not setting the Google Maps API key for geographic autocomplete
How to avoid: Add your Google Maps API key in Settings → General and enable the Places API in your Google Cloud Console
Why it's a problem: Trying to access field values before the user selects a suggestion
How to avoid: Add a condition to your workflow: Only when SearchBox A's value is not empty
Best practices
- Limit dropdown results to 5-10 items for a clean, usable interface
- Use descriptive placeholder text that tells users what to search for
- Add constraints to the search to filter out irrelevant results (e.g., only active items)
- For database autocomplete, make sure the search field has meaningful, distinct values
- Handle the empty state when the user clears the Search Box after selecting a value
- Test autocomplete with your actual data to ensure results are relevant and fast
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I need to add an autocomplete search field to my Bubble.io app. Users should be able to type a product name and see matching suggestions in a dropdown. I also need a separate address autocomplete field using Google Places. How do I set both up?
Add an autocomplete search field to my page. Users should type a product name and see matching products in a dropdown. Also add a Google Places address autocomplete field. Show me how to use the selected values in a workflow.
Frequently asked questions
Does the Search Box support multi-field search?
No. The Search Box searches against a single field. For multi-field search, create a concatenated search_text field or use a custom search input with a Repeating Group.
Can I style the dropdown suggestions?
You can adjust basic styling (font, color, padding) in the Property Editor. For fully custom dropdown design, build your own autocomplete using an Input, a hidden Repeating Group, and conditional visibility.
How do I clear the Search Box value programmatically?
Use the Reset relevant inputs action in your workflow, or use the Display data in SearchBox action with an empty value.
Does Google Places autocomplete cost money?
Google charges per autocomplete request after the free tier ($200/month credit). Each session (one user typing and selecting) is billed as a single session. Monitor usage in your Google Cloud Console.
Can I autocomplete from an external API instead of my database?
Not directly with the Search Box element. For external API autocomplete, use a regular Input, call the API on input change using the API Connector, and display results in a Repeating Group. RapidDev can help build custom autocomplete integrations with any API.
Why are my autocomplete results slow?
Database autocomplete speed depends on the number of records. If you have thousands of records, the search may lag. Ensure the search field has indexable content (under 256 characters) and consider limiting results to 5.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation