Multiple Filter if a user chooses only one input

Ask the community
,
1

I’ve built a multiple filter alongside some help.

It is working as intended, however, all input fields have to have been filled out in order for the filter to work.

Is there a way of allowing a user to input in one field and the filter to still work?

I have tried changing this:

let dbFilter = searchName.and(searchMode).and(searchConduct).and(searchAge);

To this:

let dbFilter = searchName.or(searchMode).or(searchConduct).and(searchAge);

But it causes problems when people combine filters e.g. Search, dropdowns, sliders etc.

Any help would be appreciated

import wixData from 'wix-data';
let debounceTimer;

$w.onReady(function () {
    wixData.query("GraveyardRecords")
        .ascending("internedBy")
        .distinct("internedBy")
        .then(($dropBuild) => {
            for (let i = 0; i < $dropBuild.items.length; i++) {
                let $dropVal = $w('#conductedBy').options
                $dropVal.push({ "label": $dropBuild.items[i], "value": $dropBuild.items[i] })
                $w('#conductedBy').options = $dropVal;
            }
        })

    $w('#search').onClick(() => {
        let searchName = (wixData.filter().contains("firstName", $w('#searchInput').value)).or(wixData.filter().contains("lastName", $w('#searchInput').value))
        let searchMode = wixData.filter().eq("mode", $w('#mode').value)
        let searchConduct = wixData.filter().eq("internedBy", $w('#conductedBy').value)
        let searchAge = (wixData.filter().ge("age", $w('#lowestAge').value)).and(wixData.filter().le("age", $w('#highestAge').value))

        let dbFilter = searchName.and(searchMode).and(searchConduct).and(searchAge);
        $w('#graveRecords').setFilter(dbFilter);
    })
});

$w.onReady(() => {
$w('#clear').onClick(() => {
       $w("#searchInput").value = undefined
       $w("#lowestAge").value = 0
       $w("#highestAge").value = 100
       $w("#mode").value = undefined
       $w("#conductedBy").value = undefined
       $w("#sort").value = undefined
       $w("#graveRecords").setFilter(wixData.filter())
   })
})
2

I do not know if this will work, but try it out…

let DATAFIELD = .....
let VALUE = ......

....bla bla bla code....
$w.onReady(function(){wixData.query("GraveyardRecords")
[`eq(${DATAFIELD}, {VALUE})`]
.ascending("internedBy")
.distinct("internedBy")
.then(($dropBuild)=>{...bla bla bla
3

Thanks for that. I’ve given it a quick go, but I can’t seem to make it work.

Here’s a quick view of what the filter actually looks like.

I’m hoping that I will be able to get it to work, so that if they choose to just use the search, then only the search will appear.

Or if they choose between cremation/burial, only that will appear.

Then, if they were to combine a name and cremation/burial, that would appear.

The closest I seem to have got is setting both ages to 0 and 100 along with an ‘.and’ . However, that means if I choose either of the dropdowns, then every within 0-100 age range also appears.

I hope that makes sense

989×361 10.1 KB

4

@noahlovell If your filter-options do not consist of more different filter-variations and my first approach do not work (i never tested it and ask myself the same question, right now), so you can write an UGLY solution → by using 2 or 3 if-else filter-packages, where you have different filter-situations.

if(situation1) {use filter-package-1}
else if(situation2) {use filter-package-2}
else if(situation3) {use filter-package-3}
else {defined filter-package-4}

filter-package-1: example:

.eq(x,y)
.contains(...)

filter-package-1: example:

.eq(x,y)
.contains(...)
.between(.......)

You do once the query and then put some filter-options onto it…

let query = wixData.query()

if(situation1) {query.eq(x,y).contains(...)}
else if(situation-2){query.eq(x,y).contains(...).between(.......)}
else if(situation-3){query.hasSome(x,y).between(.......)}
else {situation4}........

and so on…

This is surely not the best solution, but should work for you.