Hi,
Hope someone can help with my last problem related to searching/filtering a database table.
I have gone through the youtube video for setting up an input for searching and a dropdown https://www.youtube.com/watch?v=Hx7_8-lRsW0 . I also have a button they can click to clear the search, which works, it clears the search and shows all items in the table again.
However, if my next move is to go type in the search bar again, after I clear the filter, it appears to store the last thing selected from my dropdown pick in memory. So when someone types and searches something new in the search input field it also filters on the last dropdown pick that was selected.
I need that clear filter button to clear the last dropdown pick from “memory”.
Hope that makes sense.
Here is my code.
Thank-you!
$w.onReady(() => {
wixData.query(‘ProducerSubmission dataset’)
.find()
.then(res => {
let options = [{“value”: ‘’, ‘label’: ‘All Products’}];
options.push(…res.items.map(category => {
return {‘value’: category.title, ‘allproducts’: category.title};
}));
$w(“#categorydropdown”).options = options;
});
});
let lastFilterCounty;
let lastFilterCategory;
let debounceTimer;
export function search_keyPress() {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(“#search”).value, lastFilterCategory);
}, 200);
}
function filter(County, Category) {
if(lastFilterCounty !== County || lastFilterCategory !== Category) {
let newFilter = wixData.filter();
if (County)
newFilter = newFilter.contains(‘county’, County);
if (Category)
newFilter = newFilter.eq(‘category’, Category);
//$w(‘#dataset1’).setFilter(wixData.filter().contains(‘county’, County));
$w(“#dataset1”).setFilter(newFilter);
lastFilterCounty = County;
lastFilterCategory = Category;
}
}
export function categorydropdown_onChange() {
filter(lastFilterCounty, $w(“#categorydropdown”).value);
}
export function clearfilters_onClick() {
$w(“#dataset1”).setFilter(wixData.filter());
}
Hi,
You can clear the selection in your dropbox by adding the following line to the clearfilters_onClick() function:
$w(“#categorydropdown”).selectedIndex = undefined;
I hope this helps,
Yisrael
Thank-you for the quick response!
I added the line of code but is still doing the same thing.
I noticed that I am getting this error in my console. Not sure it’s related to my filter clear issue though.
! Unhandled promise rejection Error: The ProducerSubmission dataset collection does not exist. You cannot work with a collection using the Data API before it is created in the Editor.
The error is as significant as it sounds. The message is informing you that you don’t have a database collection of that name. If you want to use a dataset that is connected to a collection, then you need to add a dataset to the page, and then connect it to the desired collection.
To see how this works take a look at the video tutorial How to Create a Search for you Database .
Good luck,
Yisrael
Ok, I think I’m missing a key peace of the understanding here then. I will watch the videos. I do have a database connected which is being displayed as I want it on my page and searchable. Everything looks and is functioning as I would like it. But sounds like I am missing a key peace of understand of what a database is in relation to a collection. Hope I can figure it out.
Thanks for you help.
Take a look at this: About Database Collections
and this: About Datasets and Connecting Data
Together with the video tutorial I mentioned before you’ll get a good understanding of how things are organized.
Good luck, and we’re here for you when you need,
Yisrael
Thanks for trying to help Yisrael. Went through the videos and other tutorials. I feel like I did all that database setup and connection correctly.
I think I may have just had my database named wrong in my code.
$w.onReady(() => {
///wixData.query(‘ProducerSubmission dataset’)/// HAD THIS AS MY DATA COLLECTION NAME
wixData.query(‘ProducerSubmission’) CHANGED TO THIS WHICH IS WHAT I THINK IT SHOULD BE
.find()
.then(res => {
let options = [{“value”: ‘’, ‘label’: ‘All Products’}];
options.push(…res.items.map(category => {
return {‘value’: category.title, ‘allproducts’: category.title};
}));
$w(" #categorydropdown ").options = options;
});
But now when I run it I get this warning. I don’t get the ERROR from before.
Wix code SDK Warning: The selectOption parameter at index 1 that is passed to the options function cannot be set to <%=wrongValue=>. Options must contain at least a non-null value or non-null label.
and now there is nothing showing up for selection options in my dropdown list anymore.
The thing that still baffles me though is why everything was working but getting that ERROR message.
This coding stuff is difficult when you don’t know what your doing:)
Please post the URL of your site and I’ll take a look. Only authorized Wix personnel can get access to your site in the editor.
I don’t see a field in your database collection with the field key title . Therefore, category.title is undefined.
Also, the options need to be in the form as described in Dropdown.options .
Not this:
return {‘value’: category.category, ‘allproducts’: category.category};
But this:
return {‘value’: category.category, ‘label’: category.category};
ok, getting really close. Thank-you. Now the list is there but whole bunch of duplicates probably a pick for each record in the database.
See the forum post Remove duplicates from connected dropdown options on how to solve the duplicates issue.
OK! Got that working. Everything doing what it should be. With no Errors or Warnings.
Funny though, back to my very original question. When I click the clear button it doesn’t seem to clear the last selected dropdown. So if you type in the search box it filters on your new search AND whatever it was that you selected last.
I added the code as you originally suggested. $w(“#categorydropdown”).selectedIndex = undefined;
Hi. We have a related question.
We have 2 drop-down menus and a search bar (see below). All three work independently however we want them to work together to filter a career database. See the site here www.careerbiz.online/
If we filter by location it works fine. But when we try to refine the search with a second filter (all classifications) it resets the ‘location’ filter meaning you can’t filter by both ‘location’ and ‘classification’ simultaneously.
Here is what we have called our various inputs.
We have not had any luck with this question on previous Wix Forum threads. The full code is below, could anyone help us rewrite it and solve our problem? We would be so grateful!!!
Full code:-
Search bar = ‘#input1’
Location drop down = ‘#location1’
Classification drop down = ‘#classification’
Table = ‘#table1’
Dataset = ‘#dataset2’
Database = ‘careers’
export function input1_keyPress_1() {
wixData.query(‘careers’)
.contains(‘title’, $w(‘#input1’).value)
.find()
.then(res => {
$w(‘#table1’).rows = res.items;
});
}
export function location1_change(event, $w) {
wixData.query(‘careers’)
.contains(‘location’, $w(‘#location1’).value)
.find()
.then(res => {
$w(‘#table1’).rows = res.items;
$w(‘#table1’).show();
});
}
export function input1_viewportEnter(event, $w) {
wixData.query(‘careers’)
.contains(‘location’, $w(‘#location1’).value)
.find()
.then(res => {
$w(‘#table1’).rows = res.items;
$w(‘#table1’).show();
});
}
export function classification_change() {
wixData.query(‘careers’)
.contains(‘category’, $w(‘#classification’).value)
.find()
.then(res => {
$w(‘#table1’).rows = res.items;
$w(‘#table1’).show();
});
}
Harte,
You will need to create a multi-field filter, something like this:
wixData.query("myCollection")
.contains("location", $w('#location1').value))
.contains("category", $w('#classification').value))
.find()
.then( (results) => {
let items = results.items;
$w('#table1').rows = res.items;
$w('#table1').show();
} )
.catch( (error) => {
let errorMsg = error.message;
let code = error.code;
} );
I see that you asked about this before and that you are still having trouble. What you need is a multi-field filter. You can read more about creating filters in the API WixDataFilter.
What you are trying to do isn’t trivial for someone with no experience coding. You might want to consider checking out the WixArena - it’s a hub where you can look for Wix Code (and other) experts for hire.
Good luck,
Yisrael
Hi Yisrael,
Can we pick up were we left off on my remaining issue.
My filters are working fine but when I reset the data table with this code
export function clearfilters_onClick()
$w(“#categorydropdown”).selectedIndex = undefined;
$w(“#dataset1”).setFilter(wixData.filter(undefined));
$w(“#categorydropdown”).placeholder = “All Products”;
The table resets but when you do a new filter it combines the new filter with whatever was filtered last. i.e. if I pick something from the dropdown pick list, rest the table, then do a search with the input box it filters on what I type but also filters down to the last thing i chose in the dropdown before I hit the reset button.
and visa versa, if I type something in the search box the reset and pick something from the dropdown it filters on the new dropdown pick but also on the last thing typed in the search box.
Hope that makes sense.
Did you find a resolution for this as having same issue.
The issue I am finding with this type of clear filter, is that it does reset the dropdown, but it does not really clear the search. If you use one dropdown and then clear, you can still do a search in that dropdown, but you can not use the other dropdown(s) or the search box…it will not produce a search result unless you use that same dropdown.