Issues with Filtering with dropdowns/ ANY option

Ask the community
,
1

Common, I know, but I’m struggling with this and have searched the forums. VERY new to the code aspect.

My goal: make a searchable database with multiple filters.

The Page in question: https://rabbitcenter.wixsite.com/rabbitcenter/saleslistings

My issue: Right now I can search with the “contains” field for Location, breed, Sex, Rabbitry names, and all together, but I can’t figure out how to

  1. make the “Any” options work, so you don’t have to refresh the page in order to change the dropdown searches to include all results; and
  2. How to make it so that you can search “male” without it also including “female” and “American” without it including American Chinchilla, American Fuzzy Lop, etc etc. I tried “eq” instead of “contains”, but it made it so none of the other filters would work anymore.

2

Well, I got it to work with .startsWith on the sex drop down, but that doesnt fix my breed drop down issue with American vs American Chinchilla.

I ended up adding a “reset filters” button, but I would much prefer a “Any” option to the drop down instead.

3

  1. If you use .eq() instead of .contains() it’ll filter based on full match, so “American” won’t display “American Chinchilla”.

  2. First of all you should add the “all” option to the dropdown. for example:

$w("#sexDropdown").options = $w("#sexDrpdown").options.unshift({"label": "All", "value": "all"});

Then in the onClick() function :

let sexValue;
if ($w("#sexDropdown").value !== "all") {sexValue = $w("#sexDropdown").value;}
//and in the filter itself use sexValue instead of $w("#sexDropdown").value
4

@jonatandor35 When I try to do .eq, it works, but only for THAT menu. It doesn’t allow any other menu to filter items. Just comes up with no items displayed.

Trying the all option right now, ty!

5

@showrabbitsales that doesn’t make sense. Maybe you just don’t have any item that contains the exact value and also contains the other filter values.

6

@jonatandor35 I don’t know why it doesn’t work, but I’ve tried it with every field and it doesn’t work. It’s as though if I select .eq(“breed”… and then select “American”, it populates JUST American (like I want) but then if I try to search for both American AND Indiana (which is valid search) it cannot find it.

7

Okay, I just tried to input that code for an “All” option, and now none of the search functions are working. I’m sure I did something wrong here…

726×307 73 KB

8

You have to put the code inside the onReady().
Also the if line should be inside the onClick()

9

@jonatandor35 The code goes inside which onReady? The one for the Search button?

10

The let sexValue; should be in the onClick() function as well.

11

@jonatandor35 Sorry, I’m still very new to the coding aspect, so I’m not sure which line to copy-paste this coding into.

12

@showrabbitsales in my response above, I have 2 blocks of code.
the first one should be right after $w.onReady(function() {
The second one, should be right after the $w(“#searchButton”).onClick(() => {

13

@jonatandor35 I just tried it, and the Male and Female are still working, but the “All” is turning up zero results. :\

726×307 73 KB

14

I have to check out for a bit, but I will check back later for your help. I really do appreciate it, and I apologize for not understanding, if I’m missing something!

15

@showrabbitsales I don’t know why you’re using startWith here and not .eq().
but let’s try something else:

inside the onClick()

let filter = wixData.filter();
let sexValue;
if ($w("#sexDropdown").value === "all") {sexValue = false;}
else {sexValue = $w("#sexDropdown").value;}
if(sexValue){
 filter = filter.startWith("sex", sexValue);
 }
if(location){
filter = filter.eq("location", $w("#stateDropdown").value);
}
//add if's to all the parameters then:
$w("#dataset1").setFilter(filter);
//and the rest of the code

[UPDATED]

16

@jonatandor35 Because when I try “eq.” it only works for that one field, and not in conjunction with the rest of the fields.

For the All feature, So do I need to do more 'let’s? It’s saying ‘location’ is not defined. So i need to delete the current code, and just use this?

17

@showrabbitsales yes. in order to support the “all” option for other dropdowns, you should do the same. (.options, let, if etc…)

18

@jonatandor35 So I get rid of this whole thing right?

$w(“#dataset1”).setFilter(wixData.filter()
.startsWith(“sex”, $w(“#sexDropdown”).value)
.contains(“location”, $w(“#stateDropdown”).value)
.contains(“seller”, $w(“#sellerInput”).value)
.contains(“variety”, $w(“#varietyInput”).value)
.startsWith(“breed”, $w(“#breedDropdown”).value)

19

@showrabbitsales yes.

20

and needless to say you need to import wixData at the beginning of your code (that’s obvious).
Also, you should keep in mind that this filtering is case-sensitive, so filtering for “male” won’t filter-in “Male” etc…