You're not eligible to view this page. Click here to access this course or Log In if you've purchased it already

* 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.

Wix Backend module.png
wix multiple search backend module.png

Step 2:

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

See picture as reference

Screen%20Shot%202020-04-01%20at%201.39_e

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.

Properties database wix example
Properties database wix example

press to zoom
Hotels Databases Wix Example
Hotels Databases Wix Example

press to zoom
Agents Database Wix Example
Agents Database Wix Example

press to zoom
Properties database wix example
Properties database wix example

press to zoom
1/3

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.

search between multiple databases on wix

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