How to search/filter either referenced field or regular field?

Ask the community
,
1

I currently have a search bar and a search button which only filters a referenced field. Is it possible to use the same search bar and button to filter regular fields of the same collection as well? That way a user can either type in the company name(referenced field) or the company ID(regular field).

Here’s the code I use for filtering a referenced field:

export function searchBtn_click(event) {
    wixData.query("Companies")
        .contains("companyName", $w('#searchBar').value)
        .find()
        .then((results) => {
            if (results.items.length > 0) {
                let firstItem = results.items[0];
                searchID = firstItem._id;
                // filter
                $w("#dynamicDataset").setFilter(wixData.filter()
                    .eq("companyName", searchID));
            }
        });
}
2

Take a look at this article and look into the .or() documentation as well; I hope this helps :blush::

3

@tsuyoidesigns Thank you for responding! Please bear with me as I’m kinda new to this. I’ve read through the documentation but I still can’t wrap my head around it. I honestly don’t know where I will insert the .or().

Basically, I want to have my search function use either of these two queries/filters.
//This is the code for searching/filtering the referenced field(the _id of the client)

wixData.query("Clients")
    .contains("clientName",$w('#searchBar').value)
    .find()
    .then((results)=>{
        if(results.items.length>0){
            letfirstItem=results.items[0];
            filter1=firstItem._id;  
            $w("#dynamicDataset").setFilter(wixData.filter()
            .eq("clientName",filter1));

//This is the code for searching the regular field(companyName)

wixData.query("Companies")
    .contains("companyName",$w('#searchBar').value)
    .find()
    .then((results)=>{
        if(results.items.length>0){
            letfirstItem=results.items[0];
            filter2=firstItem.companyName;  
            $w("#dynamicDataset").setFilter(wixData.filter()
            .eq("companyName",filter2));
4

Anyone?

5

The .or() would go after .contains()

6

Thanks for responding @tsuyoidesigns ! I tried that but it doesn’t allow me since it queries different collections (“Clients” collection for the referenced field and the actual collection “Companies”).

Here’s the code I came up with:

let filter1;
let filter2;

export function searchBtn_click(event) {
    wixData.query("Companies")
        .contains("companyName", $w('#searchBar').value)
        .or(wixData.query("Clients")).contains("clientName", $w('#searchBar').value)
        .find()
        .then((results) => {
            if (results.items.length > 0) {
                let firstItem = results.items[0];
                filter1 = firstItem.companyName;
                filter2 = firstItem._id 

                // filter
                $w("#dataset1").setFilter(wixData.filter()
                    .eq("companyName", filter1)
                    .or(wixData.filter()
                    .eq("clientName", filter2)))
            }
        });

}

Here’s the console result:

7

Is there another way of doing this?

8

I would say there are always tons of different ways of how to solve an issue in JS.
What i would do in your case, would be to search for alternatives.
Your own version do not work?
A suggested version do not work either?
Ok, then try to go another way, but how?

For example, would it fit your needs to implement an SWITCH-BUTTON, which would do the → OR-FUNCTION <— in your case?

If so, try this one, using an additional switch-button in your seach, which would decide in which of your queries to be searched…

import wixData from 'wix-data';

$w.onReady(function () {
    $w('#btnStartSearch').onClick(()=>{
        if($w('#switch1').checked) {filter_referencedContent()}
        else {filter_mainContent()}
    });
});

function filter_referencedContent() {
wixData.query("Clients")
    .contains("clientName",$w('#searchBar').value)
    .find()
    .then((results)=>{
        if(results.items.length>0){
            letfirstItem=results.items[0];
            filter1=firstItem._id;  
            $w("#dynamicDataset").setFilter(wixData.filter()
            .eq("clientName",filter1));    
        }
        else {}
    });
}


function filter_mainContent() {
    wixData.query("Companies")
    .contains("companyName",$w('#searchBar').value)
    .find()
    .then((results)=>{
        if(results.items.length>0){
            letfirstItem=results.items[0];
            filter2=firstItem.companyName;  
            $w("#dynamicDataset").setFilter(wixData.filter()
            .eq("companyName",filter2));  
        }
        else {}
    });
}

Just an quick not tested example.

And you can even improve it a lot.

When you take a look onto the 2x codes, you will recognize that both are almost identical. You could make it even more dynamic. You have just to recognize what changes (what is different between the 2) and combine the 2 into one single dynamic one.

The marked code-parts differs, all the rest of code, is identical.
Turning a normal function into a → RETURNING ← one would do the trick and you would be able to make just ONE function out of TWO identical.

There are surely also other ways of how to solve your problem!