Search and select from drop-down database reapeater filter

Ask the community
,
1

Hello everyone, I need some help with a part of this tutorial Wix Code | How to Create a Search for Your Database - YouTube . So I followed it and the code is identical to the one presented (changed tsome IDs only), it works all fine, except the All Continents part. I think the guy goes to fast on that part and I don’t get something. So, I did not connect the filed to the database, I added all the possible countries to the list + “All countries”, but once I filter to a country, and then go back to All counties option, instead of showing all items back, a blank page is displayed. Maybe I missed something or did something wrong in setting the items. Can somebody help? Thank you!

This is the site: https://gintonicologist.wixsite.com/welcome/gins

And here is the code:
import wixData from “wix-data”;

$w.onReady(() => {
wixData.query(‘country’)
.find()
.then(res => {
let options = [{‘value’:‘’, ‘label’: ‘All Countries’ }];
options.push(…res.items.map(country => {
return {‘value’: country.name, “label”: country.name};
}));
$w(‘#country’).options = options;
})
});

let lastFilterName;
let lastFilterCountry;

let debounceTimer;
export function input1_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#name’).value, lastFilterCountry);
}, 200);
}

function filter(name, country) {
if (lastFilterName !== name || lastFilterCountry !== country) {
let newFilter = wixData.filter();
if (name)
newFilter = newFilter.contains(‘name’, name);
if (country)
newFilter = newFilter.contains(‘country’, country);
$w(‘#dataset1’).setFilter(newFilter);
lastFilterName = name;
lastFilterCountry = country;
}
}

export function country_change(event, $w) {
filter(lastFilterName, $w(‘#country’).value);
}

2

Hay, just looked at the site and the filter by country seems to be working fine. I have selected Germany, Finland and Colombia and in all cases seem to have gotten the right result.

BTW, the site looks great.

3

Yes, but when you go to All Countries, instead of showing all of them, it shows a blank page, that’s the problem :smiley:

4

Hi I’ve been having the same problem except now my dropdown bar doesn’t even react to anything & and All Items doesn’t even show up is there any solution to this?

Below are my codes… there doesn’t seem to be any errors but I’m also new with codes so…

#searchbar #searchfunction #searchdropdown

import wixData from "wix-data";

$w.onReady(() => {
  wixData.query('projectType')
	  .find()
	  .then(res => {
	  	let options = [{'value': '', "label": 'All Project Types'}];
	  	options.push(...res.items.map(project => {
	  		return {"value": project.name, "label": project.name};
	  	}));
	  	$w('#dropdown1').options = options;
	  });
});

  
let lastFilterTitle;
let lastFilterProject;
let debounceTimer;

export function iTitle_keyPress(event, $w) {
  if (debounceTimer) {
    clearTimeout(debounceTimer);
    debounceTimer = undefined;
  }
  debounceTimer = setTimeout(() => {
    filter($w('#iTitle').value, lastFilterProject);  
  }, 500);
}


function filter(title, project) {
  if (lastFilterTitle !== title || lastFilterProject !== project) {
    let newFilter = wixData.filter();
    if (title)
      newFilter = newFilter.contains('groupName', title);
    if (project)
      newFilter = newFilter.contains('projectType', project);
    $w('#dataset1').setFilter(newFilter);		
    lastFilterTitle = title; 
    lastFilterProject = project;
  }
}

export function dropdown1_change(event, $w) {
	filter(lastFilterTitle, $w('#dropdown1').value);
}
5

Hi . I also have the same issue as well. i am fighting about 4h and getting overheated…
Dear Wix support, Could you please answer to the problem Maria is having?
Best Regards,

6

I have figured this out on a regular page. Anyone know how I would do this for a dynamic category page?

7

Hi Aaron,
This thread is a couple years ago. To get the best support for your problem, please create a new post with all relevant information, code, and screenshots. Here are our guidelines for reference. Thanks.