✨ Spotlight Search – Find, highlight, and scroll to results — Easy Setup Guide
Highlight keywords, count matches, and jump between results — all with one powerful workflow action.

⸻

🔧 Step-by-Step Instructions

1. Install the Plugin
• Go to the Plugins tab in your Bubble editor.
• Search for “Spotlight Search – RG”.
• Click Install.

⸻

2. Prepare Your Repeating Group
1. Add a Repeating Group to your page.
2. Inside each cell, add a Text element to display your content.
3. Go to the ID Attribute of that Text element, and set it to:

searchable-text-[Current cell's index]

✅ This ID format is required for the plugin to target your RG cells correctly.

⸻

3. Add Counter and Navigation (Optional)

To show result count, add a Text element with ID Attribute highlight-counter.
For navigation, add two buttons or icons: one with ID prev-highlight-btn (previous) and one with next-highlight-btn (next).

These will automatically update when a search is performed — no extra setup needed.

⸻

4. Trigger the Highlighting Action

The plugin is activated using the “Highlight Search Text” action in your workflows. You can trigger it in multiple ways — for example:
• When a Search button is clicked
• When the Input’s value changes (real-time highlighting)

In the workflow, add the action:
Plugins → Highlight Search Text
Then pass the keyword (e.g. Input Search's value) into the Search Keyword field.

Once triggered, the plugin will automatically highlight matches, scroll to the first one, update the counter, and enable navigation.



✅ That’s it! The plugin will:
• Highlight all matches in yellow
• Scroll to the first result
• Show total count like 1/4 in your highlight-counter
• Let users navigate via arrow buttons

⸻

🎁 Features
• ✅ Fully workflow-based — no element needed on the page
• ✅ Highlights all matching keywords automatically
• ✅ Displays match count
• ✅ Provides “Next” / “Previous” navigation
• ✅ Works great on both desktop and mobile


Demo app's editor link: https://bubble.io/page?id=codify-labs&test_plugin=1740943167115x581009827497771000_current&tab=Design&name=spotlight_search&type=page&elements=bTHEK