How to Add Live Search in Webflow

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to add real-time search in Webflow with Finsweet CMS Search.

1. Add the Finsweet CMS Search script

In Page Settings > Head, add:

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmssearch@1/cmssearch.js" defer>script>

2. Configure the elements in Webflow

Add a Text Input with the attribute fs-cmssearch-element="input". On your Collection List Wrapper, add fs-cmssearch-element="list". On each CMS field you want to index (title, description, tags), add fs-cmssearch-field="[field-name]".

3. Add a "No results" message

Create a Div with the text "No results" and the attribute fs-cmssearch-element="empty". Set it to display: none by default: Finsweet will show it automatically when the search returns nothing.

4. Combine it with CMS Filter

CMS Search is compatible with CMS Filter: both can work at the same time on the same collection. Filters narrow down the category, while text search narrows the results within that category.

Conclusion

Real-time search dramatically improves UX on large catalogs. Use cases:

• Resource or article directory
• Product or service catalog
• FAQ with lots of entries