Search dropdown only produces blank pages

Discussion Ask a question
,
1

I followed the tutorial provided by wix in regard to creating a search bar & dropdown, and the search bar works fine but for the dropdown button does respond to anything when i choose an option the page just becomes blank & the all categories option doesn’t even show! i’m not sure what’s wrong?? There’s no errors in the codes it just doesn’t work on the dropdown please help me I’ve been struggling with this problem for 2 days now and the deadline is soon!! :frowning:

below are my codes!!

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.title, "label": project.title};
	  	}));
	  	$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);
}

this is the live site that i’m working on
https://www.thekeenkollaboration.club/explore

2

bumping this up please help!! i’ve been struggling for days already!!

3

Hi,
Just looked into your code and i see a few issues:

  1. You dont have a dataSet named projectType. meaning that the code you use to fill in the dropdown never runs.

  2. now, you manually entered the dropdown entries. the value you entered for “Fan Art” is “fanart” and when you filter data by that, nothing shows because in the artist collection it says “Fan Art”.

Hope this helps.

4

Hi Moshe,

Thanks so much for the response! The dropdown now works, but the All Project Types option still doesn’t appear and if I add it manually to the dropdown list it is not responsive. Is there any way to fix that?

5

Just use an empty string (“”) in the value for “All Project Type”.

6

Hi Moshe,

that’s what I did in the codes and the manual input value but it still only produces a blank page

could you check this part of the code for me again? I’m so sorry for the trouble…

import wixData from "wix-data";

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

is this right…

7

You misunderstood me, Thats not what i meant. Just leave it blank. Delete the qoutation marks

8

Hi Moshe!

That was actually what I tried to do but they didn’t let me leave a blank value?
That’s why I ended up trying with the quotation marks inside! Is there any way to leave it blank?

I seem to be following the instructions pretty badly I’m so sorry this seems like a pretty trivial thing but I’m not figuring it out correctly…

694×322 16.2 KB

9

You’re right, another solution is you can enter any other value here and than exclude it in your filtering code. for example, put “Any” as a value and than add this to your if() statement inside the filter function

 if (project && project != "Any")