Dropdown menu filter not working

Ask the community
,
1

Hello everyone, I’m new here and having some trouble with creating a dropdown menu to filter content on a dynamic gallery page. I tried to follow this tutorial Wix Code | How to Create a Search for Your Database - YouTube but somehow could not make it work (dropdown on the left), I am able to click on it but nothing appears. I also tried linking the second dropdown menu (on the right) directly with the dataset, but I can’t even click on it. Here are some screencaptures.

Any tips?

1920×989 95.2 KB

1920×986 70.7 KB

1920×939 54 KB

1920×940 53.6 KB

2

Hi Marcos

There could be a number of small things that cause this to happen. First of all, how is your database permissions set up?

Tiaan

3

Hi Tiaan!

It’s setup as a a website content and everyone is allowed to read it.

477×602 25.6 KB

475×601 16.2 KB

4

Hi Marcos

I’d suggest removing any connections and code related to your dropdowns, then check out this very good article written by @Jeff (Wix) - https://www.wix.com/code/home/forum/wix-tips-and-updates/remove-duplicates-from-connected-dropdown-options

This should solve your problem!

Tiaan

5

Hi Tiaan,

Thanks very much for that article! After some struggling I managed to make it work, now I have a dropdown menu showing the options for the field selected. I imagine that I’d have to do it again for each new dropdown menu, right?

Now I have two other problems:

  • How do I make each item selected on the dropdown menu to act as a filter, so the gallery will only show the cards that have this selected tag? This should work similarly to filtering blog posts by tag/category.
  • How do I create a “Show all” item that would display all items again, basically clearing up the filter?
6

Hi Marcos

Yes, you might need to do it for every dropdown depending on your requirements.

In order to filter your dataset, you can do it with something written like this. Add this code to run when a button is clicked or when a dropdwon changes, just as you wish…

import wixData from 'wix-data';// at the top of your page

//insert into your button/dropdown code
$w("#myDataset").setFilter( wixData.filter() 
.contains("firstName", $w("#dropdown1").value 
.contains("lastName", $w("#dropdown2").value 
);
//

… and so forth.

To clear the filter, add the code below under the ‘clear’ button:

$w("#myDataset").setFilter( wixData.filter());

That’s it. Good luck!

Tiaan

7

Hello Tiaan,

I added a “onClick” function, thinking that when an option would be selected, it would make the filter work, but obviously I was wrong.

The dropdown menu is working, but whenever I try to select an item from it, all the cards disappear.

This is what my code looks like now:

856×786 35.4 KB

And here’s the link to the published page: https://marcosviniciusmo.wixsite.com/meusite1/ourexperiencetest1/

I haven’t tried to add the clear filter since I want to make this work first.