Filters Database with repeating row

Ask the community
,
1

Hi,

So i got my repeating row to work, and i found a way to make the content within it to collapse, but now i’m struggling with the search box and a filter box.

I want to filter on my database row called Title in the search box
I want to add a drop down filter for the Tiers that have multiple numbers (S, A, B, C, D)

I followoed this tutorial: but it isnt working for me, nothing filters.

What am I doing wrong?
This is my code:

import wixData from “wix-data”;

$w.onReady(() => {
loadTiers();
});

let lastFilterTitle;
let lastFilterTier;
let debounceTimer;
export function iTitle_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#iTitle’).value, lastFilterTier);
}, 500);
}

export function iTier_change(event, $w) {
filter(lastFilterTitle, $w(‘#iTier’).value);
}

function filter(title, tier) {
if (lastFilterTitle !== title || lastFilterTier !== Tier) {
let newFilter = wixData.filter();
if (title)
newFilter = newFilter.contains(‘articleTitle’, title);
if (Tier)
newFilter = newFilter.contains(‘Tier’, Tier);
$w(‘#dataset1’).setFilter(newFilter);
lastFilterTitle = title;
lastFilterTier = Tier;
}
}

function loadTiers() {
wixData.query(‘Tiers’)
.find()
.then(res => {
let options = [{“value”: ‘’, “label”: ‘All Tiers’}];
options.push(…res.items.map(continent => {
return {“value”: continent.title, “label”: continent.title};
}));
$w(‘#iTier’).options = options;
});

}

And this is my site link: https://heilhydra.wixsite.com/hydradidnothingwrong/tier-list

2

I think the fieldkey Tier is wrong firstly because they start with lowercase in data collections. Then articleTitle is correct? Then your if statements will only be run separately so your search will not have time to execute and set filters that way.

3

hi,

I edited my code, now the search button does work, but the drop down query still refuses to do anything.

my code now is:

import wixData from “wix-data”;

$w.onReady(() => {
wixData.query(‘tiers’)
.find()
.then(res => {
let options = [{“value”: ‘’, ‘label’: ‘All tiers’}];
options.push(…res.items.map(tier => {
return {‘value’: ‘label’ tier.title};
}));
$w(‘#iTier’).options = options;
]}
});

let lastFilterTitle;
let lastFilterTier;
let debounceTimer;
export function iTitle_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#iTitle’).value, lastFilterTier);
}, 200);
}

export function iTier_change(event, $w) {
filter(lastFilterTitle, $w(‘#iTier’).value);
}

function filter(title, tier) {
if (lastFilterTitle !== title || lastFilterTier !== tier) {
let newFilter = wixData.filter();
if (title)
newFilter = newFilter.contains(‘title’, title);
if (tier)
newFilter = newFilter.contains(‘tier’, tier);
$w(‘#dataset1’).setFilter(newFilter);
lastFilterTitle = title;
lastFilterTier = tier;
}
}

function loadTiers() {
wixData.query(‘tiers’)
.find()
.then(res => {
let options = [{“value”: ‘’, “label”: ‘All tiers’}];
options.push(…res.items.map(continent => {
return {“value”: continent.title, “label”: continent.title};
}));
$w(‘#iTier’).options = options;
});

}