How can we help?

Real-time search is a fantastic way to allow users to search content dynamically within your Framer project. Here's a step-by-step guide to setting it up:

Step 1: Ensure the Superfields Component is Connected

• First, make sure you have Superfields connected to your collection list within your Framer project.

Step 2: Add the Real-Time Search Component

• Go to the Superfields plugin in Framer.

• Copy the Real-Time Search component and paste it into your project.

  • Set the width of the search component to "Fill" so it stretches across the available space.

Step 3: Test the Real-Time Search

• After adding the component, preview your project by clicking Preview in Framer.

• Start typing in the search bar, and it will instantly search through the title of your collection items.

  • For example, if you type "what's new," it will show items with that title.

  • If you search for something like "getting started," it will find that as well.

  • If the search term doesn't exist, the component will show an empty result message.

Step 4: Customize the Placeholder Text

• You can customize the default search text in the input field. For example, change the placeholder text to something like "Search number of items".

  • The number of total items in your collection will dynamically display as part of the placeholder text.

  • This number will automatically update based on the content in your CMS collection.

Step 5: Styling the Search Component

• Like other Superfields components, the styling of the search bar is fully customizable.

  • Adjust the text, colors, and layout to fit seamlessly with your website’s design and branding.

Conclusion

You’ve now successfully added a Real-Time Search feature to your Framer project using Superfields! This allows for an interactive and dynamic search experience where users can find exactly what they're looking for in real-time.

Happy building!