#Database #Collection #wixstorage #persistence #query #filter #debounce #dropdown #Example
Demonstrates
Links for this example
Previous tutorial: Search a Database
About this example
This example builds on the original Search a Database example, by adding persistence to the user’s search parameters using the wix-storage API . This allows the user to perform a search, close the browser, and then open the web site again with the same search parameters filtering the display.
Omg. Dude you literally read my mind!! I was about to ask this question. Like always, youre tha man Yisrael. Thanks!
Yisrael…have not attempted yet, but this will be killer if it works for me! But the one problem that needs to be addressed is how to remove the duplicates in the drop down menu…and have yet to find or find anyone with a solution
@jeff-haskins ,take a look at Remove duplicates from connected dropdown options . Make sure you read the comments for additional information.
This is exactly what I have been struggling with. Thanks for the tutorial. It works wonders!!! The only problem I’m having at the moment is i cant get it to work for my second dropdown.
What am I doing wrong?
import wixData from "wix-data";
$w.onReady(() => {
loadIsland();
loadProperty();
});
let lastFilterTitle;
let lastFilterIsland;
let lastFilterProperty;
export function islandfilter_change(event, $w) {
filter(lastFilterTitle, $w('#islandfilter').value);
}
export function propertyfilter_change(event, $w) {
filter(lastFilterTitle, $w('#propertyfilter').value);
}
function filter(title, island, property) {
if (lastFilterTitle !== title || lastFilterIsland !== island || lastFilterProperty !== property) {
let newFilter = wixData.filter();
if (title)
newFilter = newFilter.contains('title', title);
if (island)
newFilter = newFilter.contains('island', island);
if (property)
newFilter = newFilter.contains('propertyType', property);
$w('#dataset1').setFilter(newFilter);
lastFilterTitle = title;
lastFilterIsland = island;
lastFilterProperty = property;
}
}
function loadIsland() {
wixData.query('Island')
.find()
.then(res => {
let options = [{"value": '', "label": 'All Island'}];
options.push(...res.items.map(island => {
return {"value": island.title, "label": island.title};
}));
$w('#islandfilter').options = options;
});
}
function loadProperty() {
wixData.query('PropertyType')
.find()
.then(res => {
let options = [{"value": '', "label": 'All Property'}];
options.push(...res.items.map(property => {
return {"value": property.title, "label": property.title};
}));
$w('#propertyfilter').options = options;
});
}
You are calling the filter() function with 2 parameters instead of the 3 that it requires. You need to make sure that you supply the correct information to the filter() function, and that you build the query correctly in order to get the proper results.
Sorry @yisrael-wix I’m new to all of this. Are you able to show me in code how to fix the problem. So i can compare the two and visually see what i did wrong and try and understand each line of code.
Thanks again for your help 
@jaiah09 I believe what he’s saying is that you need a change event for your FilterTitle like you have for the other two.
@yisrael-wix I have finally had a chance to try this. Works great except having an issue about clearing out the search for another search on return. There are times it will not function in changing out search (when you backspace to clear the search), etc. Can a clear search be coded for this same code. Or do I have this in wrong place in my code…I notice your code does not have this on change for the word search box. I have keypress and on change for the search box #iTitle and on change for the drop down iCategory
export function iTitle_change(event) {
}
My page: https://www.ourozarks.com/search
My code:
import wixData from “wix-data”;
import {local} from ‘wix-storage’;
const PREV_COMBINATION = ‘PREV_COMBINATION’;
const PREV_CATEGORY = ‘PREV_CATEGORY’;
let lastFilterCombination
let lastFilterCategory;
$w.onReady(() => {
loadEXPLORE();
});
let debounceTimer
export function iTitle_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#iTitle’).value, lastFilterCategory);
}, 500);
}
export function iCategory_change(event) {
filter(lastFilterCombination, $w(‘#iCategory’).value);
}
function filter(title, category) {
if (lastFilterCombination !== title || lastFilterCategory !== category) {
let newFilter = wixData.filter();
if (title)
newFilter = newFilter.contains(‘combination’, title);
if (category)
newFilter = newFilter.contains(‘category’, category);
$w(‘#dataset6’).setFilter(newFilter);
lastFilterCombination = title;
lastFilterCategory = category;
}
if (title)
local.setItem(PREV_COMBINATION, title);
else
local.removeItem(PREV_COMBINATION);
if (category)
local.setItem(PREV_CATEGORY, category);
else
local.removeItem(PREV_CATEGORY);
}
function loadEXPLORE() {
wixData.query(‘EXPLORE’)
.find()
.then(res => {
let options = [{“value”: ‘’, “label”: ‘ALL CATEGORIES’}];
options.push(…res.items.map(category => {
return {“value”: category.title, “label”: category.title};
}));
$w(‘#iCategory’).options = options;
loadPrevSearch();
});
}
function loadPrevSearch() {
let prevCombination = local.getItem(PREV_COMBINATION);
let prevCategory = local.getItem(PREV_CATEGORY);
if (prevCombination) {
$w(‘#iTitle’).value = prevCombination;
}
debugger ;
if (prevCategory) {
$w(‘#iCategory’).value = prevCategory;
}
if (prevCombination || prevCategory) {
filter(prevCombination, prevCategory);
}
}
export function iTitle_change(event) {
}
@jeff-haskins What exactly isn’t working? If the search field is blank, then a blank string is saved in the local storage. It works for me.
Hi @yisrael-wix
This works perfectly for remembering some fields - text inputs and single choice selections - however when it picks up my date input and tags input from the previous search it says they can’t be added back to the user input element as they are not the correct form of date or array.
1 and 4 below work fine, 2 and 3 don’t.
Any help addressing this would be much appreciated 
if (prevPrice === "free") {
$w('#priceRadioGroup').value = prevPrice;
}
if (prevTime) {
$w('#datePicker').value = prevTime;
}
if (prevTag) {
$w('#tags').value = prevTag;
}
if (prevInput) {
$w('#input1').value = prevInput;
}
@yisrael-wix I have managed to convert the tags string to an array so that now works. Please could you advise how to do the same for the date? Thank you
Am I missing something? How do I access the tutorial? There’s no link to a video or explanation…
I managed to get a simple search based on a text input working but when I try and add the saved search functionality the filter stops working… also I’m confused about how get back to the saved search once you’re in the new page… any help much appreciated!
import wixData from “wix-data”;
import {local} from ‘wix-storage’;
$w.onReady(() => {
});
const POSTCODES_COVERED = ‘POSTCODES_COVERED’
let lastFilterpostcodesCovered;
let debounceTimer;
export function iPostcode_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#iPostcode’).value);
}, 500);
}
function filter(postcodesCovered) {
if (lastFilterpostcodesCovered !== postcodesCovered) {
let newFilter = wixData.filter();
if (postcodesCovered)
newFilter = newFilter.contains(‘postcodesCovered’, postcodesCovered);
$w(‘#dataset1’).setFilter(newFilter);
lastFilterpostcodesCovered = postcodesCovered;
}
if (postcodesCovered)
local.setItem(POSTCODES_COVERED, postcodesCovered)
else
local.removeItem(POSTCODES_COVERED);
}
function loadPrevSearch(){
let prevpostcodesCovered = local.getItem(POSTCODES_COVERED);
if (prevpostcodesCovered) {
$w(‘#iPostcode’).value = prevpostcodesCovered;
}
}