How to build predictive search in Bubble

The simplest way to build predictive search in Bubble is to use a Search Box element or a Repeating Group whose data source updates live as the user types. Bubble automatically refreshes searches on every keystroke, so you just need to set the right constraints and fields to search.

Approach 1 — Using the Search Box (fastest method)

The Search Box is Bubble’s built‑in element for predictive search. It shows a dropdown of matches while the user types. You choose a Data type and a Field to search, and Bubble handles the predictive behavior automatically.

• Add a Search Box element.
• Set Type of choices to the data type you want (e.g., Product).
• Set Field to search to a text field (e.g., name).
• Optional: choose Allow entries not in list if you want custom text.

This requires no workflows. Results appear as the user types.

Approach 2 — Using a Repeating Group for custom UI

Use this when you want full control over the look of the results. You’ll use an Input for typing and a Repeating Group (RG) whose source performs a Do a search for filtered by that input.

• Place an Input (Type: Text).
• Add a Repeating Group set to the data type you’re searching.
• Set RG’s Data source to:

Search for Products
// Add constraint:
name:icontains Input Search's value

:icontains means “case‑insensitive contains,” which is best for live searching. The RG will update automatically on each keystroke. No workflow needed.

• If you want to hide results when the input is empty, set a condition on the RG: When Input’s value is empty → This element is not visible.
• If you want faster performance, limit the search with Items until #10.

When to use which

• Search Box: best when you only need a dropdown and can display a single field.
• Repeating Group: best when you want custom layout, images, multiple fields, or actions on click.

Both methods rely entirely on standard Bubble features and update live as the user types, which is exactly how predictive search is usually implemented.