Real-time search for Webflow CMS

How to add real-time search to your Webflow CMS collections

Add powerful search functionality to your Webflow CMS collections with this guide. This enhancement allows users to instantly search through your content with real-time filtering of results.

<brix-header id="1" title="Add the required scripts">Add these two scripts to your site's head section, either in Page Settings for single-page implementation or Project Settings for site-wide use:

<!-- [Attributes by Finsweet] CMS Filter -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"></script>

<!-- [Attributes by Finsweet] CMS Load -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsload@1/cmsload.js"></script>

</brix-header>

<brix-divider>

<brix-header id="2" title="Configure CMS collection">Select your Collection List Wrapper and add three attributes:
- fs-cmsload-element: list (enables dynamic loading)
- fs-cmsfilter-element: list (enables filtering)
- fs-cmsload-mode: pagination (enables pagination integration)</brix-header>

<brix-divider>

<brix-header id="3" title="Set up search form">First, add a Form Block with the filter attribute, then configure your search input and target elements:

1. Add Form Block attribute:
 - fs-cmsfilter-element: filters

2. Add Text Input and configure both sides:
 - Add fs-cmsfilter-field to the input
 - Add matching fs-cmsfilter-field to the CMS element being searched</brix-header>
<brix-divider>

<brix-header id="4" title="Add empty state (optional)">Create a div inside your Collection List for the "no results" message and add the following attribute:
- fs-cmsfilter-element: empty</brix-header>

<brix-divider>

<brix-header id="5" title="Test implementation">Publish your site to staging (webflow.io) to test the functionality. Remember that the search feature won't work in the Webflow Designer preview.</brix-header>