Search dataset dropdown not working

Ask the community
,
1

Hi guys,

Having some troubles with search filters, the dropdown box wont filter items:

I have a dataset called: mediaDatabase
I have a search box called: iTitle
I have a search box called: iType

Inside the database i have fields:
Title
Type

Inside the iType dropdown there should be categories like: “Books”, “Videos” etc.

The search box works fine however the dropdown does not.

My code is below, any help would be great.

import wixData from “wix-data” ;

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

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

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

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

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

}

2

Hello.

You code appears to be correct. You should check other aspects, like whether you have added event handlers to the dropdown.

If the issue persists, share your site URL and the name of the page with the issue, and we’ll take a closer look.

Good luck!

3

Can you try this?

async function loadtypes() {
await wixData.query('mediaDatabase')    
.find()    
.then(res => {
let options = [{"value": '', "label": 'All Types'}];      options.push(...res.items.map(type => {
{"value": type.title, "label": type.title};     
 }));

 $w('#iType').options = options;    
 });