How to implement a SEARCH Feature in 5 minutes with Finsweet Attributes

hello everyone let's do a quick one let's let me show you how you can Implement a search feature right inside of web flow um let's say we have this blog for instance this blog cards and you want to be able to add a search feature so that when you search a particular Blog name it filters that out for you now how are you going to go about it so we have a d blog here inside of this di blog what you want to do is you want to um bring in a form so what we're going to be using we're going to be using attributes by F Su attribute is basically JavaScript functionalities without Cotes so that's what we're going to be using so what you want to select you go to attributes on facebook.com/ attributes and you want to be able to come to CMS field apps all right that's the first thing you want to do now the first step is you want to copy this script you copy it here and you go to your workflow project uh you go to blog you go to the pages so on this Blog Page you want to come here and paste the under the head section you want to be able to paste the um the script that you just copied all right is this one here that's the first thing you need to do and you save it now the next step is you want to be able to uh add a form all right a form block because you're going to be using an input field all right an input element now you're going to delete this field name you don't need it this email name delete this delete the search now you're just going to leave this text field and you want to call this search uh maybe search field right call it a search field now you want to be able to add a place folder let say search for blog or search articles whatever maybe search articles okay whatever you want to call it okay now the next thing you want to do is you want to follow this step steps now the step two is uh this is the required minimum setup all right I want to filter the content of the collection all right so you click on this arrow you click on copy this attributes name now you want to go to your blog collection which is this come here and go to settings and come click on custom attributes now you want to paste that's that you copied from the f s website um you go to the value here and copy the value to right and you paste it here that's the first thing you want to do now the next step is you want to go to filters I want this form or form block to have the filter UI element now for the for the form that that you added in your web flow you copy you go to your workflow and um come to the form here which is this form all right now you want to click on custom attributes and paste the value is Filters all right now the next thing that you want to do is step three sorry step four now field identifier this is very important all right now you copy this now where are you going to paste this you're going to paste this in the SE field see that input field going to select it and come to custom attributes and past this now for the value you're going to give it a name since you want to search the blogs by names you know by the names of the blog you're going to call the value names all right now you're going to also do this now mind you're doing this step in two places in the input field and also in the name field this is the dynamic field content of the blog you want to also do that okay you go to custom attributes paste the name and the values two is going to be names okay now after that I think that's like the major thing now what you want to do next if you preview here nothing is going to happen nothing because this is not um the live link what you want to do you want to publish your publish your website and let's check that out okay now we've published now let's see it working live so let's assume we want to search this name unlocking just search for unlocking so you see before you finish type in it brings that up for you it filters it for you now let's say you want to search uh maybe five members you know maybe let's say there are so many blogs and you want to just search by name say five members oops sorry five team members five team members all right so you see it has it has F tied for you so yeah that's how you go about implementing um a search feature in web flow now you can customize this as much as you want you might want to make it custom customized maybe you want to add you know color background to it maybe a pure white or you know however you want to do it maybe you want to take away the Border or you want to make the B h

Channel: David Anierobi

Views: 292

Keywords:

Id: bkGjm6NSJyc

Length: 5min 34sec (334 seconds)

Published: Fri Oct 27 2023