#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.
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;
}
}
Am I missing something? How do I access the tutorial? There's no link to a video or explanation...
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; }
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; }); }
@Jeff,take a look at Remove duplicates from connected dropdown options. Make sure you read the comments for additional information.
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
Omg. Dude you literally read my mind!! I was about to ask this question. Like always, youre tha man Yisrael. Thanks!