How to Implement Search Functionality in Bubble

In the Design tab, add an Input element at the top of your page and set its placeholder to 'Search...'. Below it, add a Repeating Group that will display search results. Set the Repeating Group's type to the Data Type you want to search. Set the data source to Do a Search for [Type] with a constraint: the searchable field 'contains' the Input's value. Enable 'Ignore empty constraints' on the search so all records show when the input is empty. The results will update in real-time as the user types.

To search across multiple fields simultaneously, you need to create a combined search approach. One method is to add a 'search_key' text field to your Data Type that concatenates the searchable fields (name, description, category). Update this field via a backend workflow whenever the record is created or modified. Then search against this single field. Alternatively, use the :merged with operator to combine multiple searches: Do a Search for Products (name contains input) :merged with Do a Search for Products (description contains input). The merged approach is simpler but less performant.

Inside each Repeating Group cell, display the record's primary fields: title, a short description snippet, and the category or type. Add an icon or image if available. To indicate why a result matched, use conditional formatting: if the name contains the search term, bold the name. If the description matched, show a snippet of the description with the matching text. Add a 'No results found' message using a Text element with a conditional: visible when the Repeating Group's list of items is empty and the search input is not empty.

Bubble's text search constraints only index the first 256 characters of a text field. For large datasets, avoid using :filtered after a search — always use constraints directly. Paginate results to 10-20 items. If you need full-text search across thousands of records, consider using an external search service like Algolia or Typesense via the API Connector, which provides much faster search with fuzzy matching and typo tolerance. For simpler optimization, add a debounce by not triggering the search until the user pauses typing for 300ms using a custom state and scheduled custom event.

Create a 'SearchQuery' Data Type with fields: query (text), user (User), count (number), and timestamp (date). When a user performs a search and selects a result, save or increment the SearchQuery record. Display popular searches as suggestions below the input when it is focused but empty: Do a Search for SearchQuery sorted by count descending, limited to 5. Also show the current user's recent searches: Do a Search for SearchQuery where user = Current User sorted by timestamp descending, limited to 5.