Hi everyone, I’ve spent all day trying to find where I’m wrong but I simply can’t on my own. I have followed a video (https://www.youtube . com/watch?v=Hx7_8-lRsW0&t=115s) showing how to add a dropdown menu to filter results in a repeater. The text input search box works to search the titles of the repeater items, but I can’t get the dropdown filter to work.
I replicated the code in the video (although it is differently ordered to the video where I copied it from). I think I must be misunderstanding how to map the ‘Category’ field results as options for the dropdown menu, to #dataset1.
What is unclear to me is that in the video, is he referencing multiple data collections? I suspect this is true but I can’t for the life of me figure out how/why this works as I think it’s assumed in the video that I should already know this.
What I need:
-
A dataset which is connected to display in the repeater ( done )
-
A text input search bar that searches the ‘title’ field in database and filters the repeater items ( done )
-
A dropdown list in addition to the search bar that filters the repeater items by the ‘category’ field options in the dataset ( incomplete )
I have the dropdown options listed by adding them in ‘manage choices’ via the element itself. They are the same options as appear in the database under the ‘category’ field.
The #dropdown1 is not connected to the dataset, as advised in the video. This is as far as I can take it without some intervention.
When I run the code, the categories show in the dropdown, and there are no errors showing, but selecting a dropdown option has no effect on the repeater items displayed.
If I’m meant to have a second data collection to call the dropdown filters from, I can’t figure out how. My code is below. I’d appreciate some guidance, I must be missing some fundamental knowledge.
import wixData from “wix-data” ;
$w . onReady (() => {
loadPlatform ();
});
let lastFilterTitle ;
let lastFilterCategory ;
let debounceTimer ;
export function iTags_keyPress ( event , $w ) {
if ( debounceTimer ) {
clearTimeout ( debounceTimer );
debounceTimer = undefined ;
}
debounceTimer = setTimeout (() => {
filter ( $w ( ‘#iTags’ ). value , lastFilterCategory );
}, 500 );
}
export function dropdown1_change ( event , $w ) {
filter ( lastFilterTitle , $w ( ‘#dropdown1’ ). value );
}
function filter ( title , category ) {
if ( lastFilterTitle !== title || lastFilterCategory !== category ) {
let newFilter = wixData . filter ();
if ( title )
newFilter = newFilter . contains ( ‘title’ , title );
if ( category )
newFilter = newFilter . contains ( ‘category’ , category );
$w ( ‘#dataset1’ ). setFilter ( newFilter );
lastFilterTitle = title ;
lastFilterCategory = category ;
}
}
function loadPlatform ( ) {
wixData . query ( ‘Platform’ )
. find ()
. then ( res => {
let options = [{ “value” : ‘’ , “label” : ‘All Categories’ }];
options . push (… res . items . map ( category => {
return { “value” : category . title , “label” : category . title };
}));
$w ( ‘#dropdown1’ ). options = options ;
});
}
‘Platform’ is another collection, not the dataset on my page.
Thank you if anybody wants to try and help me.