How to Implement a Search Functionality on Your Webflow CMS List Page 🔍

Ever built a Webflow CMS list and thought,
"Wow, this looks great! But wait… how do users search for stuff?" 😩

Unfortunately, Webflow doesn’t have a built-in CMS search. But don’t worry—today, we’ll fix that! 😎

In this guide, we’ll cover two easy ways to add search functionality:

1️⃣ The No-Code Way – Using Finsweet Attributes
2️⃣ The Custom Code Way – Using JavaScript for Real-Time Filtering

Let’s gooo! 🚀

‍

‍

🔹 Part 1: Adding CMS Search Using Finsweet Attributes (No Code!)

🔗 Website: https://www.finsweet.com/attributes/cms-search

Finsweet Attributes is a free tool that extends Webflow’s functionality without writing code. It makes adding search super simple.

‍

🛠 Step 1: Set Up Your Webflow CMS Page

Before we start, you need:
✅ A Webflow CMS Collection List (e.g., blog posts, products, team members)
✅ A Search Input Field

If you don’t have a search field yet, just add:

• An Input Field (Form → Input)
• A CMS Collection List (your list of items)

‍

🔗 Step 2: Add Finsweet Attributes to Webflow

1️⃣ Select your CMS Collection List

• Go to the Element Settings Panel
• Add the custom attribute:
  • Name: fs-cmssearch-element
  • Value: list

2️⃣ Select your Search Input Field

• Add another custom attribute:
  • Name: fs-cmssearch-element
  • Value: input

Your setup should look like this:

📸 (Insert image of Webflow settings panel with attributes added)

‍

⚡ Step 3: Add the Finsweet Script

Go to Page Settings → Custom Code (Before </body>) and paste this:

html

CopyEdit

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


‍

✅ Done! Now Test Your Search

🔍 Type anything in the search box, and watch your CMS list filter dynamically! 🎉

🔥 Why Use Finsweet Attributes?
✔️ No coding required
✔️ Works instantly with large CMS lists
✔️ Super fast and reliable

But what if you want full control over the search behavior? That’s where custom JavaScript comes in. 👇

‍

‍

‍

🔹 Part 2: Implementing a Custom JavaScript Search Function (For Developers) 🚀

Now, let’s build a real-time search function that filters items as you type.

‍

🛠 Step 1: Add the HTML Elements

Inside your Webflow project, add:

• A Search Input Field (give it the class search-input)
• A CMS Collection List (give it the class cms-list)
• Each CMS item should have a wrapper (cms-item) and a title inside (cms-title)

Your Webflow structure should look like this:

📸 (Insert image of Webflow Navigator panel with correct class names)

‍

⚡ Step 2: Add the Custom JavaScript

Now, let’s add the magic! Go to Page Settings → Custom Code (Before </body>) and paste this:

<script>
document.addEventListener("DOMContentLoaded", function () {
  const searchInput = document.querySelector(".search-input");
  const cmsItems = document.querySelectorAll(".cms-item");
  
  const cleanText = (text) => {
    return text
      .toLowerCase()
      // Remove accents/diacritics
      .normalize("NFD")
      .replace(/[\u0300-\u036f]/g, "")
      // Remove punctuation
      .replace(/[.,\/#!$%\^&\*;:{}=\-_`~()'"]/g, " ")
      // Replace multiple spaces
      .replace(/\s+/g, " ")
      .trim();
  };
  
  // Optional: Cache cleaned titles for better performance
  const cleanTitles = new Map();
  cmsItems.forEach(item => {
    const titleElement = item.querySelector(".cms-title");
    if (titleElement) {
      cleanTitles.set(item, cleanText(titleElement.innerText));
    }
  });
  
  let timeout;
  
  searchInput.addEventListener("input", function () {
    clearTimeout(timeout);
    
    timeout = setTimeout(() => {
      const filterText = cleanText(searchInput.value);
      const searchWords = filterText.split(" ").filter(word => word.length > 0);
      
      // If search is empty, show all items
      if (searchWords.length === 0) {
        cmsItems.forEach(item => item.style.display = "block");
        return;
      }
      
      cmsItems.forEach((item) => {
        if (!cleanTitles.has(item)) return;
        
        const titleWords = cleanTitles.get(item).split(" ");
        const isMatch = searchWords.every(searchWord => 
          titleWords.some(titleWord => 
            titleWord.includes(searchWord)
          )
        );
        
        item.style.display = isMatch ? "block" : "none";
      });
    }, 300);
  });
});
</script>

‍


✅ Done! Now Test Your Custom Search

🖊 Type in the search bar, and the CMS items will dynamically filter in real time as you type. 🎯

🔥 Why Use Custom JavaScript?
✔️ No external dependencies – Works without Finsweet
✔️ More control – Customize it to filter by multiple fields
✔️ Super lightweight – Works instantly

‍

🆚 Finsweet Attributes vs. Custom JavaScript – Which One to Use?

‍

🎯 Final Thoughts

And there you have it! 🎉 You just learned two powerful ways to add real-time search to your Webflow CMS List page.

🚀 Which One Should You Choose?

💡 If you don’t want to code, use Finsweet Attributes.
💡 If you want full control, go with custom JavaScript.

Either way, your Webflow site now has a search function that actually works! 🔥

‍

‍