(2020) Search Filter | How To - CMS Library for Webflow

hi everybody its Joe Kruk from Vince wheat in this video we're going over the F and sweet CMS library for web flow we're in the live example going through the filter component before we get into this example you must understand how this works the filter component takes text that's inside of a collection item and it filters that item in the grid based on the text so we have our collection list item here this is web flow CMS generated each one of these pieces of text is a way for this item to be filtered in the grid we have 2020 blue fun CMS false branding this one is 2017 red not fun.you CMS true web design these are controlled inside web flow CMS we have the year we have a rich text of branding web design we have color in a drop-down we have the toggle and we have fun updating any of these will update that text inside the item and then change how that item is filtered so updating filters and types and all of that is very easy and very quick and can be managed by you or the client inside editor you do not need to visibly see this text on the page it needs to be on the publish site but it does not need to be visible in all of these examples we're going to keep the filters visible because we want to show that it's actually working but if you wanted to hide these on the publish site you can do that I can hide this right here just show project name and it's still going to filter by all of these filter options it's gonna filter by 2017 red not fun everything is going to work does not need to be visible just needs to be there let's jump into examples and see how this works let's go through filtering a dynamic list with search we're going to use a text input we are going to type what we want to filter by and the grid is going to update in real time we're not pressing enter we're not loading a new page we are searching real-time live on the site on the page it's going to update and we're gonna see an update so if I go and filter by search blue the grid is going to update with only blue options and if I go and remove blue we now see all colors again if I were to filter by dev development we're only going to see development options here and so on let me search by by 2020 and here 2020 is the going to be the only option that shows up here so here we are filtering by search it's happening in real time it is easy lightweight and very flexible for the user we're in designer and we're going to look at how to set up the page in order to search for elements in real time the first thing we need to do is have a class applied to our collection list note that this is not the collection list wrapper this is the collection list element we have a class of collection - list applied to that next we are going to have a class on our parent element of the text input here we have our text field input it doesn't matter what that class is we only need to define a parent wrapper of that input notice how I emphasized a parent wrapper it doesn't need to be the direct parent here we have a form wrapper we need that form wrapper in order to get that text field on here and we have search parent we can use this element in this class in the JavaScript but for this example we are just using our filters wrapper class here this does not need to be the direct parent as long as it's parent so we have our filters wrapper class it clearly is holding our form block which has our text field nice and the last thing we need to do is add a data attribute to this text field and here inside of the text field settings we're going to filter by asterisks that's it asterisks in our library means everything so it is searching for everything that we are typing in here I could type project 5 I could type development you see MS true fun green whatever I search it's going to search for all of the text content inside of that element this is powerful it allows people to search for multiple things they don't have to define what they're searching for it is great so put that asterisks in there and that's all you need direct on the text field settings let's go into custom code and see how this works we're in custom code if you've watched examples 1 2 & 3 this is very similar and I even think it's exactly the same as one of them even though we're using a search input all the steps are the same all the mentality is the same we are doing everything the same so let's jump in and check this out the first thing we are going to do before the closing body tag is add the F and sweets EMS library script as you can see this is not the real script file when we launch the library will have a hosted file available for you next we have our project specific script where we will be running a function that happens immediately it's going to run this code right away we are going to create a new instance of our FS library that FS library instance is going to be targeted at our collection list class which is the class we gave our collection list element on the page this whole new instance is being stored in a variable called project's grid which we are going to use later on down here before we get into running that filter we're going to define our array and here we only have one a group it's a search input and it's only one item in the list our filter wrapper is filters wrapper again this is not the direct parent of the text input it is a parent of the text input and the filter type is exclusive we're filtering by one type of text at a time searching for blue it's going to find blue nice and now we have my filters defined so when we go to our projects grid variable our new instance we're going to run the filter component and we're going to feed it the filter array of my filters this is what we have just defined above to target our search input and then we also have an animation here and this animation is going to make everything look nice as it's being filtered in the grid enable duration of 200 milliseconds easing ease out effects of fade translate at 20 pixels on the y axis if you want to customize your animation please use the script generator it's going to generate correct and whatever you want that animation to show and that's all you have to do in order to search for items in real time inside a dynamic list there's a sweet

Channel: Finsweet

Views: 29,556

Keywords:

Id: 2BmID6XiRPw

Length: 8min 8sec (488 seconds)

Published: Mon May 04 2020