Hello community,
I have recently set up a dynamic page connected to dataset which includes entries that have [companyName,HQcity,HQregion,Content]. It’s a simple toy dataset that I can play with before putting in real data. I am trying to set up a filtering option where:
- a search bar allows users to search for the company name and
- a dropdown option allows users to search for the results that match the HQregion.
I have been following this web tutorial:
https: //www .youtube. com/watch?v =mTRSPNosLRw
- Sorry for the breaks in the link. For some reason I’m not allowed to post a full link…
for dynamically filtering displayed results based on an active search bar and dropdown option. I cannot get the code to compile correctly, and I am confused by which parts of the example code are arbitrary variable names within a function, which parts are referencing datasets, and which parts are referencing labeled categories within the dataset. In particular, references to the ID “iContinent”, the Dataset “Continents” (I’m not certain this is ever referenced in the code although it’s shown as an available dataset in their side menu), and the Dataset “Articles” which contains “Continent” as a category.
I have set up and connected a search bar with the ID “iCompanyname” and a dropdown menu with ID “iHQregion.” To try to match the example code, I have two datasets:
- CompanyStuff [companyName,HQcity,HQregion,Content]
- This contains the data that I want actively sorted
- Regions [Continent]
- this contains the unique values for “HQregion” from CompanyStuff to populate the
dropdown options and add the “All Regions” option to the list.
- this contains the unique values for “HQregion” from CompanyStuff to populate the
Error that I am receiving in Editing Mode:
- ‘dataset1’ is not a valid selector
- (I assume that dataset1 is placeholder dataset holding filtererd results)
Errors I am receiving in Preview Mode:
-
My dropdown menu is greyed out and unavailable, though it displays one of region names.
-
While I can type in the search bar, I am given the error:
- TypeError: $w(“#dataset1”).setFilter is not a function. (In ‘$w(“#dataset1”).setFilter(newFilter)’, ‘$w(“#dataset1”).setFilter’ is undefined)
I have included my code below, which should almost exactly follow the example except I have switched out references for IDs, datasets, and dataset categories.
import wixData from “wix-data” ;
$w.onReady(() => {
wixData.query( ‘Regions’ )
.find()
.then(res => {
let options = [{ “value” : ‘’ , ‘label’ : ‘All Regions’ }];
options.push(…res.items.map(continent => {
return { ‘value’ : continent.title, ‘label’ : continent.title};
}));
$w( ‘#iHQregion’ ).options = options;
})
});
let lastFilterConame;
let lastFilterContinent;
let debounceTimer;
export function iCompanyname_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w( ‘#iCompanyname’ ).value,lastFilterContinent);
}, 200 );
}
function filter(coname, continent) {
if (lastFilterConame !== coname || lastFilterContinent !== continent) {
let newFilter = wixData.filter();
if (coname)
newFilter = newFilter.contains( ‘companyName’ ,coname);
if (continent)
newFilter = newFilter.eq( ‘continent’ , continent);
$w( “#dataset1” ).setFilter(newFilter);
lastFilterConame = coname;
lastFilterContinent = continent;
}
}
export function iContinent_change(event, $w) {
filter(lastFilterConame, $w( ‘#iHQregion’ ).value);
}
