Dropdown search

Ask the community
, ,
1

Hi there!
I can’t figure out how to display results from the dropdown search into the repeater.
Only one “All collections” label, is working well. When I click on another one, let’s say: “Akční”, then the repeater will show nothing. Can you help me out, please?

https://kubanjakub91.wixsite.com/website/hry

import wixData from 'wix-data';

$w.onReady(() => {
  loadCollections();
});

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

export function iCollections_change(event, $w) {
  filter(lastFilterTitle, $w('#iCollections').value);
}

function filter(title, collections) {
 if (lastFilterTitle !== title || lastFilterCollections !== collections) {
 let newFilter = wixData.filter();
 if (title)
      newFilter = newFilter.contains('name', title);
 if (collections)
      newFilter = newFilter.contains('name', collections);
    $w('#store').setFilter(newFilter);    
    lastFilterTitle = title; 
    lastFilterCollections = collections;
  }
}

function loadCollections() {
  wixData.query('Stores/Collections')
    .find()
    .then(res => {
 let options = [{"value": '', "label": 'All collections'}];
      options.push(...res.items.map(collections => {
 return {"value": collections.name, "label": collections.name};
      }));
      $w('#iCollections').options = options;
    });

}

Thank you,
Jakub

2

Is there anyone able to help please?

3

Why link your page when it is password protected so nobody can see it.

https://www.vorbly.com/Vorbly-Code/WIX-REPEATER-WITH-MULTIPLE-FILTERS

4

Ok, so the code should be fine, but for some reason it works only for 3 labels:
“All collections” “X BOX” and “PS”. The other labels are blind after click. Could it be some bug?

5

@givemeawhisky Hi, thanks for sharing. I will play around with code. Link is added for Wix Corvid Admins. They can access the site and look around if the issue is not visible here. I hope some of them will be able to help because it seems like some bug. Maybe it’s not, although I really can’t see the issue, why some labels work, and others not.

6

Did you happen to read page two (2) of the comments.

This is awesome!

One question - where are the dropdown item names in the code? I've replaced just enough, but when I click on my dropdown, all it says is "All types".

How do I add my dropdown items (University names) to the code so that they appear? I've tried connecting data, but that freezes the dropdown.

Any advice would be great! You guys are better than the wix boards! 

 
Hi M,

We are glad you like our tutorial!

You are able to populate the dropdown options by modifying the first part of the code (below).

What the code does is to search for a specific field (e.g. "search") in the "Type" dataset and adds all the items in your dropdown options.

// Set Dropdown Options //

$w.onReady(() => {
wixData.query('Type')
.find()
.then(res => {
let options = [{"value": "", "label": "All Types"}];
options.push(...res.items.map(type => {
return {"value": type.search,"label": type.search};
}));
$w("#dropdownfilter").options = options;
})
});

Note: You should not connect your dropdown to the dataset via Wix Editor.

I hope this helps! Good luck!
7

Plus, with your code, I would look at moving your query part up into the page onReady function and move your collections onChange event down to the bottom of your code instead.