Database Search Filters not working

I was able to use this code somewhat successfully:

The video code had some errors. Really bad.

Then I noticed that my categories were repeating. So I found this code: https://www.wix.com/code/home/forum/advanced-tips-tricks/remove-duplicates-from-connected-dropdown-options

Via this:

It was working and now it is not.

I also noticed that if I picked a category I couldn’t use the search bar to get out of it. Also, I can’t navigate back through the categories if an item is searched. I’d much prefer to separate these too; the search for the name and the dropdown for the category.

My URL is: https://www.sleepyhollowtarrytownchamber.com/business-directory

Here is my Code:

import wixData from “wix-data”;
$w.onReady(() => {
loadbusinessCategory1();
});

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

export function ibusinessCategory1_change_1(event, $w) {
filter(lastFiltertitle, $w(‘#ibusinessCategory1’).value);
}

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

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

}

$w.onReady(function () {
wixData.query(“Business_Directory”)
.limit(1000)
.find()
.then(results => {
const uniquebusinessCategory1 = getUniquebusinessCategory1(results.items);
$w(“#ibusinessCategory1”).options = buildOptions(uniquebusinessCategory1);
});
function getUniquebusinessCategory1(items) {
const businessCategory1Only = items.map(item => item.title);
return […new Set(businessCategory1Only)];
}
function buildOptions(uniqueList) {
return uniqueList.map(uniquebusinessCategory1 => {
return {label:uniquebusinessCategory1, value:uniquebusinessCategory1};
});
}
});

If anyone could help soon. That would be great!
Thanks,

So I figured out what I needed to do here. I cleaned up my code considerably.
I decided not to use all the filters and just pouplate my list with the values I needed. Especially since the filters were the main cause of my issues.

I need to figure out how to incorporate a debounce element in here.
Here is my code:

import wixData from 'wix-data';

//For full API documentation, including code examples visit http://wix.to/94BuAAs

$w.onReady(function () {
//TODO: import wixData from ‘wix-data’;
});
let debounceTimer;
export function iTitle_keyPress(event, $w) {
if (debounceTimer){
clearTimeout (debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(()=> {($w(‘#iTitle’).value);},200);
wixData.query(‘Business_Directory’)
.contains(‘title’,$w(‘#iTitle’).value)
.find()
.then(res => {
$w(‘#repeater1’).data = res.items;
});
}

export function ibusinessCategory1_change(event, $w) {
wixData.query(‘Business_Directory’)
.contains(‘businessCategory1’,$w(‘#ibusinessCategory1’).value)
.find()
.then(res => {
$w(‘#repeater1’).data = res.items;
});
}

I was also trying to figure out how to make it so that if the search is being used the category label returns to the placeholder.

Any help today would be fantastic.

Any help?

Can someone help figure out this debugger and a way to disable category select if search is being used?

Hi,
In order to reset the dropdown you can use this code:

$w('#dropdown1').value = undefined;
$w('#dropdown1').resetValidityIndication();

For more information:

Good luck!
Roi.

Roi, this worked great, but my debounce is still an issue. The search is not responding as cleanly anymore there is definitely a load delay.
Here is the url: https://www.sleepyhollowtarrytownchamber.com/business-directory

The code with the new lines are this:
import wixData from ‘wix-data’;

$w.onReady(function () {
//TODO: import wixData from ‘wix-data’;
});
let debounceTimer;
export function iTitle_keyPress(event, $w) {
if (debounceTimer){
clearTimeout (debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(()=> {($w(‘#iTitle’).value);},500);
wixData.query(‘Business_Directory’)
.contains(‘title’,$w(‘#iTitle’).value)
.find()
.then(res => {
$w(‘#repeater1’).data = res.items;
$w(‘#ibusinessCategory1’).value = undefined;
$w(‘#ibusinessCategory1’).resetValidityIndication();
});
}

export function ibusinessCategory1_change(event, $w) {
wixData.query(‘Business_Directory’)
.contains(‘businessCategory1’,$w(‘#ibusinessCategory1’).value)
.find()
.then(res => {
$w(‘#repeater1’).data = res.items;
});
}