Hello Community,
I am so very close to making this work. I have watched the Corvid youtube tutorial on making a free text and dropdown filter for a dataset. They have left out a lot of key details in terms of what parts of their examples are arbitrary variables, column names, and collections. I have taken a patchwork of other examples to figure out these key features, and almost have this working.
Currently, my dropdown menu is populated correctly, and the free-text search is working as expected. However, I cannot get the dropdown selection to also filter the results. Once I have this figured out, I will create a comprehensive “re-do” of their tutorial that doesn’t leave out all of the details. I will do it step-by-step so nobody else has to pick their way through a circuitous and incomplete example.
Tutorial: http s://www.youtube .com/watch?v=mTRSPNosLRw
Right now, I have two collections/ datasets:
1) CompanyStuff (this is the set to be filtered) → [CompanyName, Region, City]
2) Regions ( this if for populating the dropdown automatically ) → [Regions]
I want to filter:
1) from CompanyStuff, [CompanyName] using the free text search ( ID: #iConame )
2) from CompanyStuff [Regions] using the dropdown menu ( ID: #iRegion )
- I am populating the dropdown menu from the dataset Regions, column [region].
As I said before, my free text search is filtering correctly, however the dropdown choice is not being incorporated in the filtered results. Can somebody help me understand what is happening in my code below?
import wixData from ‘wix-data’ ;
$w.onReady(() => {
wixData.query( ‘Regions’ )
.find()
.then(res => {
let options = [{ “value” : ‘’ , ‘label’ : ‘All Regions’ }];
options.push(…res.items.map(regions =>{
return { ‘value’ : regions.regions, ‘label’ : regions.regions};
}));
$w( ‘#iRegion’ ).options = options;
})
});
let lastFilterConame;
let lastFilterRegion;
let debounceTimer;
export function iConame_keyPress(event, $w) {
if (debounceTimer){
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w( ‘#iConame’ ).value, lastFilterRegion);
}, 200 );
//console.log($w(‘#iTitle’).value);
}
function filter(coname, regionhq){
if (lastFilterConame !== coname || lastFilterRegion !== regionhq){
let newFilter = wixData.filter();
if (coname)
newFilter = newFilter.contains( ‘companyName’ , coname);
if (regionhq)
newFilter = newFilter.eq( ‘region’ , regionhq);
$w( ‘#dataset1’ ).setFilter(newFilter);
lastFilterConame = coname;
lastFilterRegion = regionhq;
}
}
export function iRegion_change(event, $w) {
filter(lastFilterConame, $w( ‘#iRegion’ ).value);
}