Clone Project

Dynamic Filter

Created by
JosephBongrand
Similar Projects
Oops! Something went wrong while submitting the form.

0 Comments

Be the first to leave a comment.
Loading
User is typing...
No Name
Set
4 years ago
Moderator
This is the actual comment. It's can be long or short. And must contain only text information.
(Edited)
No Name
Set
2 years ago
Moderator
This is the actual comment. It's can be long or short. And must contain only text information.
(Edited)
Load More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Load More
Description:  
AI Description

This component demonstrates a dynamic search bar that allows users to filter CMS collections using Finsweet's Attributes Filtering solution combined with custom JavaScript. Users can input search terms to filter categories and select them via checkboxes, with keyboard navigation support for suggestions.

Key Features:

  • Dynamic search input for filtering CMS categories.
  • Checkboxes for selecting multiple categories.
  • Keyboard navigation for suggestions using arrow keys and Enter key.
  • Real-time suggestion display based on user input.

Design Elements:

  • Utilizes a clean form layout with input fields and checkboxes.
  • Active filters are displayed with a background color and rounded corners.
  • Suggestions are highlighted with a light grey background when selected.

Potential Use Cases:

  • E-commerce websites needing to filter products by categories.
  • Blogs with multiple categories for filtering articles.
  • Portfolio sites allowing users to filter projects by type.
  • Event websites where users can filter events by categories.

Conclusion: The Test filtre component is a practical solution for implementing category filtering in Webflow projects, enhancing user experience through dynamic search capabilities.

Description from Webflow:  
This is an example of how you can create a dynamic search bar to filter CMS collections. I'm using Finsweet's Attributes Filtering solution with some custom JavaScript to enable users to use an input to search through existing categories for the CMS and select them to enable filtering. This will display a checkbox that can then be unselected. I've also added the possibility to use keyboard navigation in for the suggestions and using Enter to select a suggestion. I hope this helps! Feel free to clone and modify ;)
Tags from Webflow: 
cmsfilter,  dynamicfilter,  cms,  finsweetattributes
.