Help with multiple dropdown's to filter a dataset and populate a repeater with results using WIX Code

Ask the community
,
1

Hi everybody, I’m not going to bore you with my life story and get straight to the point. What I’m looking to create are three dropdown’s with three options for “type” , “location” and “price” . Which then populate “repeater1” with the results filtered from “dataset1” after choosing one or all of the options available and clicking on the “search” button. It would look something like this:

1083×525 37.2 KB

I have been working on this for a few weeks and tried so many different options and tutorials and nothing seems to work. The last one I followed was WiX Data Filters - YouTube because it’s the closest to what I’m looking for yet when I press “search” NOTHING happens. Here’s a link to what I’m working on https://www.mmcproperties.es/try4 and the code is below.

I really hope someone can help me with this before I lose my mind!
Best regards.
MB

import wixData from ‘wix-data’; // For full API documentation, including code examples, visit Velo API Reference - Wix.com

$w.onReady( function () {
//TODO: write your page related code here…

});

export function button_click(event, $w) {
$w(‘#dataset1’).setFilter(wixData.filter()
.contains(“type”, $w(‘#dropdown1’).value)
.contains(“location”, $w(‘#dropdown2’).value)
.contains(“price”, $w(‘#dropdown3’).value))

.then((results) => {
console.log(“Dataset is now filtered”);
$w(‘#repeater1’).data = results.items;
}). catch ((err)) = {
console.log(err);
});
$w(‘#repeater1’).expand();
}

2

Hey MB,

Wow! I had a brain fart on this one. Completely missed that you can’t use .contain for a number - and the price field is a number.

Try this:

export async function button_click(event, $w) {
    $w("#dataset1").setFilter(wixData.filter()
            .contains("type", $w('#dropdown1').value)
            .contains("location", $w('#dropdown2').value)
            .eq("price", Number($w('#dropdown3').value))
        )
        .then(() => {
            console.log("Dataset is now filtered");
        })
        .catch((err) => {
            console.log(err);
        });
    $w('#repeater1').expand();
}
3

Thank you! I think I’m making progress. Now when I press “search”, the repeater goes totally empty and I get this in the Developer Console.

1005×162 10.6 KB

Any idea on how to proceed?
Thank you in advance!

4

@mariliisbull Maybe your search has no results. As you can see from the screenshot, I did a search and got a good result:

1066×535 144 KB

Try the search that I did, then try some others that you’re sure will give you a good result. I’m not having any problem.

5

@yisrael-wix I have spent so much time working on this and was just about to give up. Thank you so very much for your prompt help!

6

@MB i know u did so hard work on this code and you are doing well. this is not fair to ask you but i now what you feel when some can get your reward at free. i wanted to did as u did. i tried many times do this like you. can u give me code and database creating details about above code. please give me full detail about your above filter with screenshot of database and code panel.please help me . i requested you. please.

7

Hey, I promised myself I would make a little tutorial about this once I figured it out and I happened to have some free time today so I did exactly that. I’m by no means an expert, I just made this work by chance and help from Yisrael! Anyway there is a PDF you can download at the bottom of this page. https://www.mmcproperties.es/example

Hope it helps and good luck!

8

Thank You! MB. i don’t have word how to say to thank you . thank you so much my dear friend.can we be a friend on fb. my profile is fb.com/premcharanRB Thank you.

9

Hey,

I’ve also had this problem but got it working thanks to this. But after some time it just stops working and the repeater shows up empty when I’m filtering via a dropdown. I have four dropdowns and suddenly I can’t just filter via ONE, I need to filter via at least two or more. Why does this happen? Have been using the exact code as above.

10

I wish I could help you but I just don’t know how. My code looks like this for the actual page (https://www.mmcproperties.es/properties-for-salemaybe) maybe try starting over and coping my current code for the actual page?

898×498 56 KB

I also added a “-” in front of each choice (in my database and the dropdown) so you can have the option to choose “All”, as well as creating what is essentially a code for myself for each item for example a
- Villa = - 1 or an - Apartment = - 3 as you can see in the example below. I also kept every value in the “field type” as “text” rather than “numbers” as it didn’t work as I needed it to.

539×580 80.3 KB

767×413 94.7 KB

I hope this helps somewhat.

11

Those who might need the reset button for the filter here is the code:

export function button3_click(event,$W) {
//Add your code for this event here:
$w(“#dataset1”).setFilter(wixData.filter());
}

12

Is there a way to add a message incase of no results found? and also to search for a certain range of numbers like less than 50… ? Plz help
@yisrael-wix
@givemeawhisky

here is my current code:

import wixData from 'wix-data';
export function button2_click(event, $w) {
$w('#dataset1').setFilter(wixData.filter()
.contains("location", $w('#haim1').value)
.contains("quantity", $w('#haim2').value)
.contains("reaching", $w('#haim3').value)
)
.then(() => {
console.log("Dataset is now filtered");
}) .catch((err) => {
console.log(err);
});
$w('#repeater1').expand();
}
export function button3_click(event,$W) {
//Add your code for this event here:
$w("#dataset1").setFilter(wixData.filter());
}
13

I am also stuck like you were and happy you were able to make it work. When I searched, console says filtered but search shows empty. Should I add “-” and number it like you did so it could work for me or should I check on something else. I can see you didnt number locations, is there any specific reason. Could you please help???

14

Are you able to show message when no results???

15

Hi, is there a way to select a price range, rather than equals