📘 Setup Instructions
🔧 How to Use the Text Search and Highlight Action

This highlights keywords in a text element when triggered — and supports result count + navigation.

⸻

1. Add the Target Text Element
• Drag a Text element onto your page.
• Set its ID Attribute to: search
✅ This is where the plugin will perform the search and apply highlights.

⸻

2. Add Navigation Elements

To display and navigate between results:
• Add a Text element to show the result count (e.g., “2/5”)
→ Set ID Attribute to: highlight-counter
• Add a Previous button or icon
→ Set ID Attribute to: prev-highlight-btn
• Add a Next button or icon
→ Set ID Attribute to: next-highlight-btn

These will automatically update and control the highlighted results.

⸻

3. Trigger the Action via Workflow

Use the plugin’s workflow action:

🧩 Plugins → Text Search and Highlight

Set the Search Keyword field to a dynamic value — for example: Input Search’s value



✅ The plugin will:
• Highlight all matching text
• Scroll to the first match
• Show total matches in the counter
• Enable forward/backward navigation

⸻

💡 Pro Tips
• The search is case-insensitive and highlights all matches.
• You don’t need any additional JavaScript.
• Works great for long paragraphs, transcripts, and searchable FAQs.


Demo app's editor link: https://bubble.io/page?id=codify-labs&test_plugin=1751751396479x931060905324314600_current&tab=Design&name=search_and_highlight_text&type=page&elements=bTHFl