All,
I like to create multiple dropdown filters on a repeater linked to a database. I have seen multiple posts on this in the forum, but I have not been able to re-use the solution as I am not experienced enough to get them working. I have some filtering functionality up and running, but it does not do the trick for 100%.
So hopefully with step by step suggestions and improvement from you experts out there I will get there in the end. In return I will try to give as much information as possible so other non-expert coders may be able to learn from it.
I have been able to create a search based on multiple dropdowns using the following code:
import wixData from ‘wix-data’;
$w.onReady(function () {
$w(“#button2”).onClick(() => {
$w(“#dataset1”).setFilter(wixData.filter()
.eq(“size”, $w(“#dropdown1”).value)
.eq(“location”, $w(“#dropdown2”).value));
});
});
// Code above will filter the repeater based on the values chosen in dropdown1 and dropdown2. The filtering will be done as soon as a person clicks on button2.
For my trial is used a simple test database with just 2 sizes (large and small) and 2 locations (A and B)
Now why the code above does not solve all my problems:
The values of the dropdown are not linked to the database as this shows duplicates. Meaning if there are 5 large properties in the database, the dropdown showed the large value 5 times. So I manually set the size options to large and small.
If you do not choose an option the placeholder text is used in the filtering process, which will give no results.
As the dropdown options are not linked to each other it is possible to select a non-existent combination. For example if there are no small properties in location B in the database I like to dropdown2 to only show A if small is selected at dropdown1. Alternative for now is to at least have a text showing up that this combination does not exist
Reset button. Not figured out how to build that one yet.
I know there is a video on how to create a filter and search, I tried to figure it out, but it was too complex in one go to fully comprehend it. So hopefully by building on above step by step I can get this working. So any help is welcome.
Kind regards
PS the post above was also posted by me in a respons to a post on this forum, but as I like to help others with posting the final working solution I wrote it again under my own name so I have more control on it.
Hi,
Have you checked this thread ? I recommend that instead of using the setFilter function, you can use the regular filter function . This way, it will be easier for you to manipulate the search however you want. Moreover, you can make sure that when the field is empty (meaning that there’s only the placeholder text) it will not filter the collection using this text.
Hi,
I did something similar, though I couldn’t understand the previous points, I know how to achieve number 4.
Here is the bit of code I used
//resets the 'categorie' input
export function shape16_click(event, $w) {
$w("#categorieInput").value = null;
$w("#dynamicDataset").setFilter(wixData.filter()
.contains("title", $w("#searchInput").value)
.contains("categorie", $w("#categorieInput").value)
.contains("vendeur", $w("#vendeurInput").value));
}
Some French vocabulary ^^ :
categorie means category
vendeur means retailer
Basically, whenever the user clicks on the shape, it resets the “categorieInput” (category) and still keeps all other input data (if the user typed “iPhone” in the search field, it will still show items that contain “iPhone” in the title, or if he previously selected a retailer (vendeur) it will only show this one)
First of all thank you for your help. Some feedback:
Video: seen it, but to advanced for me for now.
Filter function, I am going to look at it, but for now my basic filtering comes along, so gat it working quick and dirty first, later do it properly.
Reset function: I played with the “reset” code. It does give some error (dropdown boxes light up red), but it works. So I just killed the red boxes, by making them black.
By using .contains instead .eq I solved issue 2.
So:
Issue 1 not solved yet
Issue 2, solved by using .contains instead of .eq
Issue 3 not solved yet
Issue 4 solved, although with some sort of error, but it works (see above)
As promised an update on my progress and hopefully helpful for others. Still no expert, but understanding bits and pieces a little more. In short my challenges again:
Filtering on specific values. Ideally based on database values.
Placeholder text interferes with the filter process.
Because of multiple filters, there can be non-existent combinations.
Reset button.
My initial examples were based on a test site. Now I have used that knowledge to use in on my real site. Some explanation. There are now two search dropdowns, which are both linked to a fixed list of parameters (via ‘manage dropdown list’), these parameters correspond with the values in my database. Button 13 and 14 are search buttons, by clicking one, the value of the other is automatically reset. This solves my issue 3 for now. Issue 2 was solved when I changed from.eq to .contains. So if not values are selected and the search button in clicked there is no issue I do get an error message in the developer console: (Wix code SDK error: The “src” property cannot be set to “”. It must be a valid URL starting with “http://”, “https://”, or “image://”.). Issue 4 was already resolved see code below. As for issue one, for now the workaround with predefined values works and when I have more time I will try to get it linked directly to database values. Another issue that just came up is that the filter that I have set through ‘manage dataset’ is also reset after clicking the reset button, showing unfinished/old data from my collection. There is an boolean field (active) in my database that should prevent that.
Open issues:
The error message, anyone knows how to get around this?
How do I keep/reactivate the filter after clicking on reset? I have tried adding a line to the reset button like:
.gt(“active”, true)
.contains(“active”, true)
But this did not work. Anyone suggestions?
Code looks like:
import wixData from ‘wix-data’;
$w.onReady(function () {
//TODO: write your page related code here…
// Filter based on dropdown1 data
$w(“#button13”).onClick(() => {
$w(“#dropdown2”).value = null;
$w(“#dataset1”).setFilter(wixData.filter()
.contains(“lsPriceRange”, $w(“#dropdown1”).value));
});
// Filter based on dropdown2 data
$w(“#button14”).onClick(() => {
$w(“#dropdown1”).value = null;
$w(“#dataset1”).setFilter(wixData.filter()
.contains(“hsPriceRange”, $w(“#dropdown2”).value));
});
Another is issue that just came up is that the filter that I have set through ‘manage dataset’ is also reset after clicking the reset button, showing unfinished/old data from my collection. There is an boolean field (active) in my database that should prevent that.
Got the same issue, I guess a further bit of code within the “onlick” function of the button/shape is to be added, to keep the default dataset filter on. Only I don’t know what this bit of code could be.
My thought exactly, I was hoping that adding this line to the filter would work: .contains(“active”, true). But no luck, keep you posted if I find a solution.
Regarding the filter reset issue. For now I have a applied a work-around. I have created a textfield (field key: “active”) in my database which I populate with “y” and “n”. y stands for checked box an n stands for an unchecked box. Based on that info added this line to the code:
.eq(“active”, “y”)
So my reset code now looks like this:
// Reset button code:
$w(“#button12”).onClick(() => {
$w(“#dropdown1”).value = null;
$w(“#dropdown2”).value = null;
$w(“#dataset1”).setFilter(wixData.filter()
.eq(“active”, “y”)
);
Frustrating I could not get the filter working on the checkboxes, but for now I can move on. If anyone has a proper solution, I am still interested.
I am sure that the number of items can be shown, but my skills are not up to that level yet to spell that out for you. I can imagine that the key building blocks can be found here:
But how to apply it all… Please let me know if you figured it out
Hi all! I would like help with my repeater search function. Currently i have a dataset of 450 items with 10 items per page and a load-more button. when i search, more than 10 items appear, and if i use the .limit(10) function, the loadmore button resets the query.
