I have a data set of companies. They are being filtered by text input to a field (title) and/or a drop down (continent - which is actually states but I didn’t want to change from starter code). I’m have a couple of issues:
-
With the input field, it works perfectly until I input something that returns NO results in the repeater. Then as I go back and type some legit data that should return results, I get either a blank repeater, or my default placeholders - as though it has lost connection to the data set.
-
With the drop down, again, works perfectly, but only for the first 2 filter attempts. The 3rd attempt returns NO change to the previous filter. Then, as in #1 above, the 4th attempt returns the default placeholder for my repeater.
Here’s the live site…
https://breadcrumbsweb.wixsite.com/naera/reconditioners
And here’s my code…
import wixData from “wix-data”;
$w.onReady(() => {
loadContinents();
});
let lastFilterTitle;
let lastFilterContinent;
let debounceTimer;
export function iTitle_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#iTitle’).value, lastFilterContinent);
}, 500);
}
export function iContinent_change(event, $w) {
filter(lastFilterTitle, $w(‘#iContinent’).value);
}
function filter(title, continent) {
//console.log($w(‘#iContinent’).value);
//console.log(lastFilterContinent);
if (lastFilterTitle !== title || lastFilterContinent !== continent) {
let newFilter = wixData.filter();
if (title)
newFilter = newFilter.contains(‘title’, title);
if (continent)
newFilter = newFilter.contains(‘continent’, continent);
$w(‘#dataset1’).setFilter(newFilter);
lastFilterTitle = title;
lastFilterContinent = continent;
}
}
function loadContinents (){
wixData.query(“NAERA-Members”)
.limit(200)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
let options = buildOptions(uniqueTitles);
options.sort();
options.push({“value”: ‘’, “label”: ‘All States’});
options.reverse();
$w(“#iContinent”).options = options;
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.continent);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}