# How to build autocomplete suggestions in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

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.

## Before you start

- A Bubble app with searchable records
- Basic understanding of Repeating Groups and custom states
- Familiarity with conditional visibility

## Step-by-step guide

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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 code example

File: `Workflow summary`

```text
AUTOCOMPLETE — WORKFLOW SUMMARY
================================

PAGE ELEMENTS
  Input: Search field
  RG: Dropdown (hidden, 5-8 items, 200px height)
    Source: Search where name contains Input value
    Visible when: Input length > 1

WORKFLOW: Select Suggestion
  Trigger: RG cell clicked
  Step 1: Set Input value to selected item name
  Step 2: Hide RG
  Step 3: Trigger search/action if needed

WORKFLOW: Clear
  When Input is empty → Hide RG

PERFORMANCE
  - 5-8 items max
  - Server-side constraints only
  - Show after 2+ characters
```

## Common mistakes

- **Showing suggestions from the first character** — Single-character searches return too many results and trigger excessive queries. Fix: Show after 2-3 characters using a character count condition.
- **Using :filtered instead of search constraints** — Client-side filtering is slow for large datasets. Fix: Put all filtering in Do a search for constraints.
- **Not closing the dropdown when clicking outside** — Dropdown stays open causing confusion. Fix: 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

## 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.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/create-auto-complete-suggestions-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/create-auto-complete-suggestions-in-bubble