There are many ways to search and filter data in Wix Studio. You can query your CMS data with the Wix data API, or if you want to do site search, you can use the Wix search API to easily search through any of your SEO index site pages. Another method is to search by applying filters to a data set, which we'll be covering in this video. We'll go over how to search and filter data that's connected to a front-end element, such as a repeater, through a data set. In this example, we'll have a repeater of recipes connected to a data set displaying data from a recipes collection. There are multiple different input fields, and we'll filter data automatically based on all of these inputs.
First, let's go over our collection setup. In our CMS, we have a collection titled Recipes. Our Recipes collection has the following fields: Name (a text field), an Image, a Boolean Is Vegetarian, a Number Cooking Time, and a Tag Meal.
In our editor, I've connected a repeater to the Recipes collection via a data set. Name your data set by going into the data set settings. I've added a few different types of input elements to our page and renamed their IDs in the properties panel. Here I have a text input named Name Input, a slider named Time Input, a checkbox named Is Vegetarian Input, and a dropdown named Me Input.
Now for our code, first import the Wix data API. Next, in our onready function, we'll add event handlers to each input so that we can handle what happens when an input is changed. We'll use onchange for all of the input elements, except for the text element where we'll use on input. Next, we'll go create a function called Update Filter. Call this function in each of the input elements' event handlers so that the filter is updated anytime the inputs are changed.
Now, back in our Update Filter function, we're going to create some constants that are set to the value inside each input element, then create a variable to store an empty Wix data filter. To filter data in your repeater, you'll have to pass a Wix data filter object to your data set, so let's set our Recipes data set's filter to the filter that we've made for the Name Input. First, we would check if the input value is not empty or undefined, which we can represent with if Name. We would want to filter our data based on whether the user's input matches any part of the item's name. In the Val API reference, you'll find a list of all the functions that you can apply to your Wix data filter object. For the Name, we can use Contains, so we'll update our filter by adding a condition. You'll need to pass two parameters to the Contains function: first, the name of the collection field you want to filter from, and second, the value you want to compare against. In our case, the user's input that we stored in our Name variable. For the Time Input, we will filter our data set for items which have a preparation time less than or equal to our slider value. Since it says up to, we can use the Less Than function for this.
Now for our dropdown and checkbox, you might notice that, unlike the previous input elements, these two already have an option to filter your data set by default in the UI. This is a convenient way to filter data sets, but note that if you have a combination of custom input filters, like the text input, which is usually used for writing to a collection, not to filter it, the custom filter you've made in your code might override the filter you've connected to your dropdown via the interface. To stop this from happening, try to keep your filtering logic all in one place. In our case, since
We've already started creating custom filters in our code, we'll try to contain all of the filtering here just for this data set.
Now for our meal type, we would only want to run the filter if the option selected is not all, which is one of the default options that come if you connect your dropdown labels to your CMS. This is represented as a string "Reset All", so only if the option selected is not all, we will filter for items whose meal field tag matches the meal type input. And similarly, our vegetarian-only checkbox typically has a filter option through the UI, but we'll add the logic to our code to prevent any overriding of filters. Now we'll only want to filter if the checkbox is checked, and otherwise we want to display all of the recipes. Filter only if Is Vegetarian is true, using the Equals function for our Boolean Is Vegetarian collection field. And we're done—you should be able to filter your data set by all of these user input values.
