Creating a Database with a Search bar and multiple dropdown filters

Ask the community
, , ,
1

Question:
How can I make my search bar and dropdown filters work together properly in Wix Studio without overriding each other or causing conflicts?

Product:
Wix Studio Editor

What are you trying to achieve:
I want to allow users to filter listings using dropdowns and a search bar. The dropdowns should filter based on different attributes like accreditation, delivery mode, pricing, duration, and requirements. The search bar should filter results based on keywords but should not override the selected dropdown filters. Additionally, selecting “All” in any dropdown should remove that specific filter instead of hiding all results.

What have you already tried:

  • Used Wix Data API to apply filters dynamically via code.
  • Implemented an applyFilters() function that filters based on dropdown selections and search input.
  • Tried using setFilter() to apply multiple conditions.
  • Attempted to store previous filters and merge them when a new search is made.
  • Used .or(wixData.filter()) when “All” was selected to clear specific filters, but this caused issues.
  • Followed a YouTube tutorial (https://www.youtube.com/watch?v=Hx7_8-lRsW0) but still experiencing problems.

Additional information:

  • After using the search bar, selecting filters no longer updates the results.
  • Clicking “All” in any dropdown causes all listings to disappear.
  • The search bar seems to override dropdown selections instead of working alongside them.
  • Would it be better to let dropdowns work natively and focus only on fixing the search bar with code?
2

This can be done but the code is specific based on the requirements (no real cut and paste template)

also you need to code all inputs - not have any connected to the dataset in the editor.

the issue when selecting ALL is that yuo may have it connected to the dataset in the editor.

example (the search is seperate as an override in this case, but could be changed to suit your needs) - https://www.herestostrength.com/selfcaredirectory