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

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

wixcoding@gmail.com