Table of Content

  1. Overview
  2. Elements
  3. Code
  4. WIx API Reference

Please Subscribe

Overview

Many wix users have probably been looking at setting up a multiple dropdown filter with a search button that searches “exact” items in a database. That is a very technical idea to actualize especially if you are a newbie to coding. Well all that ends now. This tutorial will let users to easily implement an exceptional filtering system that can specifically filter a repeater and get you what you want.

A terrific feature of this system is the ability to populate the Restaurant and Cuisine dropdowns with different options based off of previous selections from the Location dropdown. This feature is regarded as a conditional attribute. I made this possible by making sure that the user can actually select what they want. Say they live in London, they can select what kind of cuisines are in London, and what exact restaurant in London. Most importantly, all the dropdowns are independent, which means you can decide to filter one or combined dropdowns at a time.

Items with options from two or more dropdowns will be filtered. If item is not found the repeater will be hidden.

The search button helps to initiate the filter function and get values from the dropdown options and then display found items on the repeater. This is what makes the Multiple dropdown filter possible.

Above all, the significance of this tutorial is the ability to filter particular content. But, on the other hand, you can decide to auto search without the search button, but that only limits to singular filter at a time.

The Design

Elements

I added these elements and customized them in making the Multiple dropdown filter.

Repeater

This repeater contains text and button elements. The “Restaurant” text is connected to the restaurant field in the database. “London” (Red) is a button which is connected through its label to the cuisine field in the restaurant. These elements can be customized by the user as they desire Finally, the second “London”(grey) is also a button which is connected to the location field in the database.

ID: repeater1

Box

ID: box1

The box element is used as an additional design to hold the dropdowns and search button and to add a feel of beauty to the filters.

Restaurant Location Dropdown

ID: #restaurantLocation

This dropdown holds the restaurant locations. The options are saved in the public.js

Restaurant Cuisine Dropdown

ID: restaurantCuisine

This dropdown holds the two cuisines available in the website. French & Italian. The options are available. This dropdown is disabled on load

Restaurant Dropdown

ID: #Retaurant

The restaurant dropdown is a dynamic dropdown that changes its options based on the selections from the Location Dropdown. The restaurants found in London populate the restaurant dropdown and Worldwide restaurants populate the restaurant dropdown when “Worldwide” is selected in the Location dropdown. This dropdown is disabled on load

Search Button

ID: #search

When values are selected from the dropdowns, the search button is used to combine them and filter them to be displayed on the repeater.

Database

Dataset

ID: dataset1

Dataset is set to Read-only because we are viewing items from a database and not putting items in it.

Database Contents

The Location and Cuisine fields are tag fields because it is possible to have a restaurant in different locations with multiple cuisines. The Restaurant field is a text field and the Image is an Image field.

This image has an empty alt attribute; its file name is image-8-1024x425.png
Although we have four fields in our repeater but I only made use of Restaurant, Location, and Cuisine because we are only filtering their values. The image field is connected to the repeater box background

Field Keys

The following are the lists of field and their field keys. We will be needing the field keys in the site code for filter purposes.

  • Restaurant field – title
  • Location field – location
  • Cuisine field – cuisine
  • Image field – image

Working Example

Code

Public.js Code

My public.js is named Restaurant. When importing it in your site code it should be in this format – ‘public/yourname.js’;

//Restaurant Location
export const restaurantLocation = [
    { value: "", label: "Select location"},
    { value: "London", label: "London" },
    { value: "Worldwide", label: "Worldwide" },
 
];
 
 //Cuisines
export const restaurantCuisine = [
    { value: "", label: "Choose cuisine"},
    { value: "French", label: "French" },
    { value: "Italian", label: "Italian" },
 
];
 
 //Worldwide Restaurants
export const worldwideRestaurant = [
    { value: "", label: "Select Restaurant"},
    { value: "Children Oat", label: "Children Oat" },
    { value: "Children Ludo", label: "Children Ludo" },
];
 
//London Restaurants
export const londonRestaurant = [
    { value: "", label: "Select Restaurant"},
    { value: "Breakfast Friday", label: "Breakfast Friday" },
    { value: "Rice Chop Master", label: "Rice Chop Master" },
    { value: "Beef Part", label: "Beef Party" },
    { value: "The Raven House", label: "The Raven House" },
];

Site Code

 
import { local } from 'wix-storage';
import wixData from 'wix-data';
 
import { restaurantLocation, restaurantCuisine, worldwideRestaurant, londonRestaurant } from 'public/Restaurant.js';
 
//Search function
export function search_click(event, $w) { //Button onClick event
    $w("#dataset1").setFilter(wixData.filter() //Set dataset to filter
            .contains("location", $w("#restaurantLocation").value) //location field key and dropdown
            .contains("title", $w("#Restaurant").value) //Restaurant field key and dropdown
            .contains("cuisine", $w("#restaurantCuisine").value)) //Cuisine field key and dropdown
        .then((results) => {
            console.log("Dataset is filtered");
            $w("#repeater1").data = results.item; //Repeater ID
        })
        .catch((err) => {
            console.log(err)
        });
    $w("#repeater1").expand; //Repeater expands after filter
}
 
//Conditional Dropdown
$w.onReady(function () {
 
    $w('#restaurantLocation').options = restaurantLocation;
    $w('#restaurantLocation').placeholder = 'All locations';
 
    $w('#restaurantLocation').onChange(() => {
 
        let location = $w("#restaurantLocation").value
        $w("#dataset1").setFilter(wixData.filter()
            .eq('location', location))
 
        if ($w('#restaurantLocation').value === 'Worldwide') {
            $w('#restaurantCuisine').options = restaurantCuisine;
            $w('#restaurantCuisine').placeholder = 'Worldwide Resto';
            $w('#Restaurant').options = worldwideRestaurant;
            $w('#Restaurant').placeholder = 'Restaurants';
            $w('#Restaurant').enable();
            $w('#restaurantCuisine').enable();
 
        } else if ($w('#restaurantLocation').value === 'London') {
            $w('#restaurantCuisine').options = restaurantCuisine;
            $w('#restaurantCuisine').placeholder = 'London Cuisines';
            $w('#Restaurant').options = londonRestaurant;
            $w('#Restaurant').placeholder = 'Restaurants';
            $w('#Restaurant').enable();
            $w('#restaurantCuisine').enable();
 
        }
 
    });
});

Leave a Reply

Your email address will not be published. Required fields are marked *

Loading

SENDING

Your message was sent successful. Thanks.

REFRESH

Let's Talk

Don't wait any longer, let us know about your project and provide you affordable rates.

We need some more important information to better understand how we can help you in the best possible way.

Tell us more about what you want your project to be. We appreciate details to help us assist you better.

  • Personal Details
  • Budget
  • Support