* Bonus content *

create a search bar that filters multiple databases 

This code will help you filter multiple databases using a single search bar.

​

In order to proceed follow these steps:

​

Step 1:

​

- Add a backend file from the Site Structure, therefore hover over Backend and click on the + Sign then choose New .js File. Name this file multipleSearch.jsw

See below pictures as reference.

Step 2:

​

- Add your Databases. For this example we will use 3 Databases which are: Properties, Hotels and Agents.

See picture as reference

Step 3:

​

- Once you added your Databases, add their fields. In our example we created the following fields for each database:

​

- Properties:  title, type, city, country, description, image

- Hotels:  title, hotelName, ratings, country, city, image

- Agents:  title, firstName, lastName, image

​

See the following gallery ar reference.

Step 4:

​

- In your page, now add the followings: 

​

- a Search Bar

- a Repeater

- a Search Button

- a loading Gif (downloadable here for free)

- a text for No Results

​

DO NOT add any Dataset, we will connect each element using code.

See picture as reference.

​

Step 5:

​

- Once you have added all the elements go to your Backend file which is multipleSearch.jsw and paste the following code:

​

​

import wixData from 'wix-data';

export async function multipleSearch(keyword) {

    try {

        const maxLimit = 20; //max number of results retrieved, if you want you can increase or dcrease this number.

        let type = keyword;

        let country = keyword;

        let city = keyword;

        let hotelName = keyword;

        let firstName = keyword;

        let lastName = keyword

        console.log(keyword)

        let properties = wixData.query("Properties")

            .contains("type", type).ascending("type")

            .or(wixData.query("Properties").contains("country", country).ascending("country"))

            .or(wixData.query("Properties").contains("city", city).ascending("city"))

            .find();

        let hotels = wixData.query("Hotels")

            .contains("hotelName", hotelName).ascending("hotelName")

            .or(wixData.query("Hotels").contains("country", country).ascending("country"))

            .or(wixData.query("Hotels").contains("city", city).ascending("city"))

            .find();

        let agents = wixData.query("Agents")

            .contains("firstName", firstName)

            .or(wixData.query("Agents").contains("lastName", lastName))

            .find();

        // use Promise all to resolve all the promise at the same time instead of one by one

        let resPromAll = await Promise.all([properties, hotels, agents]);

        // get all the items in an array

        let items = resPromAll.map(_ => _.items); // [[items1][items2]...] 

        let allItems = [].concat(...items); // add all items togeter in a single array [allitems]

        // show only first 20 items

        return allItems.slice(0, maxLimit);

    } catch (e) {

        console.log("Error : ", e);

    }

}

​

Step 6:

​

- Once you have added the Backend file code, then add this code to your Page where your repeater is, and remember to not add any Dataset.

In this example we have linked each button inside the repeater #repeaterButton to its unique Dynamic Page. In order to achieve this you need to paste the Dynamic page link into your code (see the green lines below). 

​

​

import { multipleSearch } from 'backend/multipleSearch.jsw';

import wixLocation from 'wix-location';

$w.onReady(function () {

    $w("#totalResults").hide();

    $w('#repeater1').data = [];

    $w("#loadingGif").hide();

    $w('#searchBar').onKeyPress(() => {

        setTimeout(() => {

            let val = $w('#searchBar').value;

            if (val === '') {

                $w("#repeater1").hide();

                $w("#repeater1").data = [];

                $w("#loadingGif").hide();

                $w("#totalResults").hide();

            }

        }, 40);

    });

        $w("#searchButton").onClick((event) => {

        $w("#repeater1").hide();

        $w("#loadingGif").show();

        multipleSearch($w('#searchBar').value)

            .then(items => {

                if (items.length > 0) {

                    $w("#loadingGif").hide();

                    delayRepeater();

                    $w("#totalResults").hide();

                } else {

                    $w("#repeater1").hide();

                    $w("#loadingGif").hide();

                    $w("#totalResults").show();

                }

                $w('#repeater1').data = items;

            });

    })

})

function delayRepeater() {

    setTimeout(() => {

        $w("#repeater1").show();

    }, 200)

}

export function repeater1_itemReady($item, itemData, index) {

    let linktoDynamicPage = itemData["link-properties-title"];

    // set link default to home page

    let link = "/";

    let title = itemData.title;

    let type = itemData.type;

    let starRating = itemData.starRating;

    let country = itemData.country;

    let city = itemData.city;

    let hotelName = itemData.hotelName;

    let firstName = itemData.firstName;

    let lastName = itemData.lastName;

    let image = itemData.image;

    let photo = itemData.photo

    $item("#repeaterTypeHotelNameAgentField").text = type || hotelName || firstName + " " + lastName;

    $item("#repeaterTitle").text = title;

    $item("#repeaterCountry").text = country;

    $item("#repeaterCity").text = city;

    $item("#repeaterImage").src = image || photo;

    if ($item("#repeaterTitle").text === "Property") {

        $item("#repeaterTypeHotelNameAgentField").text = type;

    } 

    if ($item("#repeaterTitle").text === "Hotel") {

        $item("#repeaterTypeHotelNameAgentField").text = hotelName + " " + starRating;

    }

    if ($item("#repeaterTitle").text === "Agent") {

        $item("#repeaterTypeHotelNameAgentField").text = firstName + " " + lastName;

    }

    // update the link variable

    if (itemData["link-properties-title"]) {

        link = itemData["link-properties-title"];

    } else if (itemData["link-hotels-title"]) {

        link = itemData["link-hotels-title"];

    } else if (itemData["link-agents-title"]) {

        link = itemData["link-agents-title"];

    } 

    $item('#repeaterButton').onClick(() => {

        // console.log(link);

        $w("#loadingGif").show();

        $w("#repeater1").hide();

        $w("#totalResults").hide();

        wixLocation.to(link);

    })

}

​

***THINGS TO REMEMBER***

​

- Do not add any Dataset, therefore do not need to link any element​

- If you change the Dynamic Page URL, then you need to change again the code (green lines) above.

SEE LIVE EXAMPLE HERE